Ir al contenido principal

Edición de blogs en Biblioguías UCM

Guía básica para la edición de blogs en LibGuides CMS

Vídeos responsivos

Incrustar un vídeo de YouTube

Incrustar vídeo

  1. En YouTube localizamos el vídeo que deseamos incrustar. Pulsamos en el botón Share situado bajo el vídeo.
  2. Pulsamos en el botón Embed
  3. En la ventana emergente copiamos el código.
  4. En nuestra guía insertaremos un elemento de contenido Media / Widget en la caja.
  5. En el espacio correspondiente pegaremos el código y guardaremos.

 

Insertar vídeos y otros elementos responsivos

Pensando en especial en los dispositivos móviles, debemos intentar que los medios insertados sean responsivos, es decir, se ajusten al elemento contenedor. Por defecto, YouTube y otros servicios proporcionan un ancho fijo en píxeles. Para evitar problemas al ser escalado el vídeo, podemos emplear algunas clases destinadas a ello.

Tomemos el código:

    <iframe width="560" height="315" src="https://www.youtube.com/embed/ugv5lVvdfe4" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

El ejemplo sería:

    <div class="embed-responsive embed-responsive-16by9"><iframe  class="embed-responsive-item" src="https://www.youtube.com/embed/ugv5lVvdfe4" title="Aranzadi. Búsqueda de jurisprudencia" allowfullscreen></iframe></div>
  1. Crearemos un div para contener el medio incrustado.
  2. Asignaremos las siguientes clases al div contenedor.
    • embed-responsive
    • embed-responsive-16by9 o embed-responsive-4by3 dependiendo del ratio de aspecto del contenido.
  3. Asignamos la clase embed-responsive-item al iframe, vídeo, etc.

La vista de Fuente HTML puede emplearse para modificar la disposición y estilos del texto. Por ejemplo, podemos añadir elementos como <div>o atributos class

Sin embargo, conlleva riesgos. Antes de hacer cambios debemos revisar el código antes de guardar. Elementos o atributos no cerrados (por ej. un <iframe> sin el cierre </iframe>) pueden impedir que el blog cargue correctamente.

Accesibilidad en los vídeos

Si tenemos posibilidad, agregaremos al vídeo subtítulos y/o proporcionaremos transcripciones.
Una forma de hacer más accesibles los iframe es añadir un título, para que el usuario sepa lo que ha encontrado en la página. Pegaremos directamente tras la palabra iframe al principio del código:

title="texto con un título descriptivo del medio insertado"

Por ejemplo:

<iframe title="Videotutorial sobre la configuración de EDUROAM UCM" src="https://www.youtube.com/embed/gP7EdZCLlrA?list=PL1548E"...> </iframe>