Domingo, 05 Marzo 2017 20:28

Bootstrap desde Dreamweaver: Videos responsivos

Valora este artículo
(0 votos)

Cabecera tutorial videos responsivos

Insertar videos responsivos con Bootstrap desde DW CC2017

Esta nueva entrada forma parte de los tutoriales (muy) básicos sobre la inserción de componentes responsivos con Bootstrap desde Dreamweaver CC2017; esta vez veremos la inserción de un video responsivo.

En primer lugar, la aclaración de siempre: Podemos insertar un video responsivo dentro de cualquier etiqueta que hayamos previsto dentro de un documento html en proceso de creación, ó como en este caso, que partiremos de un documento nuevo (ver pasos 1, 2 y 3 de esta entrada), en el que insertaremos directamente dentro del body del nuevo html:

a. Insertando un video responsivo: El procedimiento básico

Bastará con colocar nuestro puntero de inserción dentro de la etiqueta body de la página, y desde el menú principal de Dreamweaver elegir Insertar -> Componentes de Bootstrap -> Responsive Video Embed:

Insertar un video responsivo desde el menú de Dreamweaver CC2017

Como podrán ver al realizar la práctica, Dreamweaver insertará un video de demo desde la página de Adobe, y lo hace con un código como el siguiente:

<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="http://tv.adobe.com/embed/1221/24197/"></iframe>
</div>

Donde las clases .embed-responsive; embed-responsive-item y .embed-responsive-16by9 aportan las propiedades necesarias para el comportamiento responsivo de los elementos del componente; especialmente, .embed-responsive-16by9 refiere a un video con una relación de ancho y alto de 16/9 (de ahí que lo destacara en rojo en esta nota). Veremos más abajo el estilo correspondiente para un video de relación 4/3.

Es posible ver una vista del código en vivo haciendo clic aquí, y descargar el ejemplo completo, comprimido, desde este enlace.


b. Insertar un video de ejemplo desde YouTube

Siguiendo el mismo procedimiento al arriba mencionado, simplemente cambiaremos el estilo .embed-responsive-16by9 por .embed-responsive-4by3, para colocar luego el código aportado por YouTube para compartir un video en un sitio externo.

El código html obtenido para insertar el video será el siguiente:

<div class="embed-responsive embed-responsive-4by3">
   <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/KQINIt9ref8"></iframe>
</div>

Es posible ver una vista del código en vivo haciendo clic aquí, y descargar el ejemplo completo, comprimido, desde este enlace.


c. Ejemplo de video responsivo centrado en la página

Este tercer, y último, ejemplo de esta entrada muestra como insertar un video dentro de una columa responsiva centrada en la página web, ocupando un 50% de anchura para todas las resoluciones, excepto para la media query col-xs- en la que ocupará un 100% de anchura; para esto debemos saber insertar una columna responsiva Bootstrap desde Dreamweaver (ver punto b2 de esta entrada).

El código html que usamos para insertar el video con las condiciones arriba mencionadas es el siguiente:

<div class="row">
   <div class="col-sm-3 col-md-3 col-lg-3">&nbsp;</div>
   <div class="col-sm-6 col-md-6 col-lg-6">
      <div class="embed-responsive embed-responsive-4by3">
         <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/KQINIt9ref8"></iframe>
      </div>
      <div class="col-sm-3 col-md-3 col-lg-3">&nbsp;</div>
   </div>
</div>

Visualmente, para el video arriba ingresado, es similar al siguiente:

Video centrado y responsivo con Bootstrap

Es posible ver una vista del código en vivo haciendo clic aquí, y descargar el ejemplo completo, comprimido, desde este enlace.

Nota importante: Es posible encontrar todas las propiedades correspondientes a las clases CSS arriba mencionadas en la hoja de estilos bootstrap.css

Saludos para todos!
Plácido Luna.

Visto 485 veces Modificado por última vez en Domingo, 05 Marzo 2017 21:06