Tutorial: Conseguir Vídeos YouTube Adaptáveis: Solução Manual 100%

MixViral · 16/01/2016

Buenas comunidad

Estos dias he estado buscando la forma de hacer que los videos en mi web sean responsive, he provado muchos plugins pero la mayoria me piden la version pro para esta funcion, sin embargo encontre esta solucion temporal y aunque su uso es de forma manual.. funciona 100%

Lo primero es agregar la CSS que harar el trabajito (Apariencia > Edito):

Inserir CODE, HTML ou PHP:

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; height: 0; overflow: hidden;
}
 
.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

agregado esto, ahora cada vez que deseamos poner un video en nuestras entradas lo agregamos de la siguiente forma:

Inserir CODE, HTML ou PHP:

<div class="video-container">
         <iframe src="http://www.youtube.com/embed/ID-VIDEO" frameborder="0" width="560" height="315"></iframe>
</div>

y Listo! .. con esto tendriamos un video 100% Responsive..

La Pauta · 16/01/2016

Muchísimas gracias, incursionare en algunos proyectos, tal vez esto me sea de muchísima utilidad. :encouragement:

matsito · 16/01/2016

muchas gracias por el aporte

LuisMorales · 16/01/2016

Espero no me vayan a sancionar, pero creo que al insertar la URL en WP se hace el ajuste automático al tamaño de pantalla.

Carlos Arreola · 17/01/2016

Muchas gracias por el aporte 🙂 [MENTION=146596]MixViral[/MENTION]

Rodolfo Reyes · 17/01/2016

Buen aporte :encouragement::encouragement::encouragement::star2:

Frozt · 18/01/2016

muy buen aporte, te agradezco!

Tutorial: Conseguir Vídeos YouTube Adaptáveis: Solução Manual 100%

MixViral

La Pauta

matsito

LuisMorales

Carlos Arreola

Rodolfo Reyes

Frozt

Tópicos similares