Si quieres compartir con tus usuarios lectores contenido multimedia, en este caso un video de Youtube, te enseñaremos cómo hacerlo en simples pasos.
En este tutorial te mostraremos cómo agregar el video en la sección de Widgets, pero si tienes conocimientos en HTML, CSS y JavaScript podrás insertarlo en otras secciones de la tienda.
1. Lo primero que debes hacer (en caso que aún lo hayas hecho) es subir tu video a Youtube. Una vez se encuentre cargado allí, debes copiar el enlace que Youtube te provee para poder incrustar el video en la tienda.
Para obtener el enlace debes ingresar al link del video y dar clic en "Compartir":
2. Allí haz clic en "Incorporar".
3. Se nos abrirá la siguiente ventana en donde tendremos el código a incorporar:
Copia el código tal como se muestra en la imagen.
4. Ahora desde la tienda, ve a Panel de Control > Ajustes > Widgets y pega el código obtenido, envolviendolo en la siguiente etiqueta:
<div class="video-responsive">
Aquí dentro debes colocar el código de Youtube
</div>
El código debe quedarte de esta manera:
<div class="video-responsive">
<iframe width="560" height="315" src="https://www.youtube.com/embed/mPsc8c" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
Haz clic en Guardar.
5. Por último, agregaremos unos estilos CSS para centrar el video y darle un poco de margen. Para esto debes ingresar en Panel de control > Ajustes > Avanzados y verificar si tienes el recuadro de CSS Personalizado.
-Si tienes el recuadro de CSS Personalizado pega el siguiente código:
.Widget .container-fluid{
text-align: center;
margin-top: 9px;
}
- Si NO tienes el recuadro de CSS, deberás pegar tu código en Custom before </body> code de la siguiente manera:
<style>
.Widget .container-fluid{
text-align: center;
margin-top: 9px;
}
</style>
Haz clic en Guardar.
Puede que alguna etiqueta tenga algún error y es por eso que el código no funciona. Para solucionarlo revisa que el código esté correctamente y tal cual como te lo compartimos en este tutorial.
Esperamos que este tutorial te haya resultado sencillo. Si tienes consultas escríbenos a [email protected].