Vídeos
Los vídeos que se muestren en la web deben estar insertados en un marco que delimite su tamaño y apariencia por defecto.
BUstreaming es una plataforma desarrollada por la Biblioteca Universitaria de la ULPGC que ofrece un canal de difusión multimedia para que toda la Comunidad Universitaria pueda convertir y divulgar sus vídeos o audios facilitando su consulta directa.
Provee la posibilidad de incrustar un vídeo en la siguiente forma:
Vídeo incrustado a través de BUstreaming
- HTML
- JS
<div class="ulpgcds-video">
<iframe src="https://bustreaming.ulpgc.es/reproducirEmbed/100197" allowfullscreen></iframe>
</div>
Video de Youtube
- HTML
- JS
<div class="ulpgcds-video"><iframe allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/NdbUfLll2J0" width="560"></iframe></div>
Vídeo de Vimeo
- HTML
- JS
<div class="ulpgcds-video"><iframe title="vimeo-player" src="https://player.vimeo.com/video/291249918" width="640" height="359" frameborder="0" allowfullscreen></iframe></div>
Uso del componente
Los vídeos incrustados es una muy buena herramienta para difundir información acerca de la organización.
Buenas prácticas:
- Los vídeos debería ir acompañados de una imagen que se muestre antes de que el usuario pulse sobre él.
- Los vídeos deberían estar subtitulados.
- Acompañe el video de un título o una descripción breve de su contenido.
Estilos CSS
Estas son las clases aplicadas a las etiquetas HTML para conseguir los diferentes estilos.
Selector CSS | Descripción |
---|---|
.ulpgcds-video | Aplica los estilos y funcionalidad de la visualización de los vídeos. |
Diseño
En esta sección se pueden ver los aspectos que presenta el componente para las diferentes pseudoclases relativas a la interacción con el mismo. Estos estilos siguen los mismos patrones de interacción que el resto de los componentes del Design System, por lo que su modificación puede afectar a la consistencia del sistema y a la experiencia de los usuarios.