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>
div para contener el medio incrustado.div contenedor.
embed-responsiveembed-responsive-16by9 o embed-responsive-4by3 dependiendo del ratio de aspecto del contenido.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.
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: