Background

Documentación Segurishop

Cómo insertar un video Youtube en el editor

VOLVER

Para insertar un video Youtube en una sección, editor básico de portada u otra herramienta, solo tenemos que hacer click en el ícono de "mundo" que aparece en el editor.

Se abrirá la siguiente ventana:

Desde aquí, lo que NO tenemos que hacer es insertar la clásica URL que vemos en nuestro navegador cuando vemos un video. Haciendo un ejemplo:

Entramos a ver el siguiente video: https://www.youtube.com/watch?v=0bJKaNq7Md8

El código del video es 0bJKaNq7Md8 y es eso lo que debemos rescatar para armar un enlace de este tipo:

https://www.youtube.com/embed/0bJKaNq7Md8
 

¿Por qué hacerlo de esta forma?
Esta herramienta es una iframe o ventanilla que puede mostrar una url externa, entonces, si agregaramos el enlace original, vamos a ver toda la página de Youtube y no el video exclusivamente.

Ahora haciendo algo más avanzado. Cuando queremos pensar en dejar el video adaptado a móviles:

Podemos agregar una capa DIV cuya clase tenga de nombre:
Para formato 4:3 : embed-responsive embed-responsive-4by3
Para formato 16:9 : embed-responsive embed-responsive-16by9

Y al iframe le agregamos la clase: embed-responsive-item.

¿Dónde hago todo esto?

Para la capa DIV, podemos hacerlo desde aquí y de la siguiente forma:

Y dentro del DIV, en el iframe/video (hacer doble click para editar) desde la pestaña Avanzado:

Esto mismo podemos hacerlo escribiendo el siguiente código, pero editando el enlace como ya lo explicamos:

<div class="embed-responsive embed-responsive-4by3"><iframe class="embed-responsive-item" frameborder="0" height="500" scrolling="no" src="https://www.youtube.com/embed/0bJKaNq7Md8" width="800"></iframe></div>

Eso sería todo. Ya tendremos nuestro video y además que se ajuste a la pantalla en los formatos 4:3 o 16:9.
Si no se agregan estas clases en el modo avanzado no te preocupes, la tienda virtual igual redimensionará el iframe de video de forma automática. La diferencia es que agegando estas clases, el cuadro y el video (ambos) quedarán en ese formato, evitando las barras negras que aparecen en el video si no se agregan.