Domingo, 19 Marzo 2017 15:49

Bootstrap desde Dreamweaver: Video en slider responsivo

Valora este artículo
(0 votos)

Video en slider responsivo

Colocar un video responsivo en un slider responsivo

Respuesta a consulta en clases: Insertar un video responsivo en un slider responsivo, usando Bootstrap desde Dreamweaver. Veamos como:

1. Creamos un nuevo documento HTML incluyendo estilos y scripts de Bootstrap (deseleccionaremos la opción "Incluir un diseño ya creado"):

Nuevo documento Boostrap

2. Desde Dreamweaver insertamos el componente Carousel, posicionándonos previamente en el lugar del código que necesitemos (ver también "Slider responsivo desde Dreamweaver CC2017"):

Insertamos el componente Carousel

3. Ubicamos el código destinado a colocar la imagen de relleno (Carousel_Placeholder.png) que coloca Dreamweaver:

Ubicamos el código que inserta la imagen en el slider

Este será el código que sustituiremos por el correspondiente al código para insertar un video responsivo desde Dreamweaver usando Bootstrap.

4. Una vez eliminado el código anterior, insertamos el componente de Video Responsivo:

Insertamos el video responsivo dentro del slider

5. El código para insertar el video dentro del slide del carousel es el siguiente:

El código correspondiente al video responsivo

Repitiendo el mismo proceso podremos insertar un video dentro de cada slide.

Notas finales:

Saludos para todos!
Plácido Luna.

Visto 317 veces Modificado por última vez en Domingo, 19 Marzo 2017 16:42