Como volver responsive design los videos de YouTube, Vimeo, HTML5 y embed

Hoy en día son más las personas que se conectan a Internet mediante algún dispositivo móvil como una Tablet o un Smartphone. Si tu theme o plantilla de tu Blog es responsive, les estarás brindando a los futuros visitantes de tu sitio una experiencia agradable.

Pero si has comprado un theme que es responsive design, pero al programador se le olvido hacer que los videos de YouTube, Vimeo, embed y HTML5, que uno inserte en un artículo también se adapten a la pantalla del dispositivo móvil, para que estos videos se adapten a la anchura de la pantalla, hay que jugar un poco con el código CSS de tu theme.

Como volver responsive design los videos de YouTube, Vimeo, HTML5 y embed

La solución más rápida es cambiar el “width” al “100%” habremos solucionado el problema. Pero también hay otras formas de hacerlo.

Volver un video de YouTube, Vimeo, embed y HTML 5 responsive design

Lo primero que haremos será copiar las siguientes líneas de código en tu hoja de estilo de tu theme de WordPress.

.js-video {
height: 0;
padding-top: 25px;
padding-bottom: 67.5%;
margin-bottom: 10px;
position: relative;
overflow: hidden;
}
.js-video.vimeo {
padding-top: 0;
}
.js-video.widescreen {
padding-bottom: 57.25%;
}
.js-video embed, .js-video iframe, .js-video object, .js-video video {
top: 0;
left: 0;
width: 100%;
height: 100%;
position: absolute;
}
/* Responsive */
@media (max-width: 767px) {
.js-video {
padding-top: 0;
}
}
.js-video{height:0;padding-top:25px;padding-bottom:67.5%;margin-bottom:10px;position:relative;overflow:hidden}.js-video.vimeo{padding-top:0}.js-video.widescreen{padding-bottom:57.25%}.js-video embed,.js-video iframe,.js-video object,.js-video video{top:0;left:0;width:100%;height:100%;position:absolute}@media(max-width:767px){.js-video{padding-top:0}}

Ahora cuando escribas un artículo y quieras incrustar un video de YouTube, Vimeo, embed o HTML, solo tendrás que hacerlo de la siguiente manera.

<div class="js-video [vimeo, widescreen]" >
<iframe width="560" height="315" src="http://www.youtube.com/embed/wN3gueLT0D8?showinfo=0" frameborder="0" allowfullscreen></iframe>
</div>

Otra forma de hacerlo es si tu theme de WordPress es responsive design, solo tendrás que copiar el siguiente código de abajo:

#content object,
#content embed,
#content iframe {
max-width: 100%;
margin: 3px 0 10px;
display: block;}

Pero “ojo”, la palabra “#content” deberás cambiarla por la que tienes en tu hoja de estilo. Vamos a ver si me explico, tu theme es de dos columnas, la parte donde está tu artículo se llama “#columna1” y la parte donde esta los widgets (sidebar) se llama “#columna2”, entonces solo tienes que reemplazar la parte del código “#content” por “#columna1”. Entonces el código quedaría así:

#columna1 object,
#columna1 embed,
#columna1 iframe {
max-width: 100%;
margin: 3px 0 10px;
display: block;}

Fuente: jonsuh

Descubre más

1 Commentario

  1. Cómo hacer esto en blogger? Tengo videos de Vimeo en varias entradas de blogger pero no se como hacerlo. Le puse 100% al width pero al agrandar o achicar la ventana del navegador se ven zonas negras arriba o abajo.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *