Crear código para videos responsivos

javiadrados24 · 19 May 2016

Buenas tardes,

Estoy buscando una pequeña ayuda para poder publicar contenido con videos que sean responsive. Estoy intentando crear el siguiente código, al igual que hago con las imágenes pero no quedan ajustado a los distintos dispositivos... Esto es lo que he creado. Alguien podría echarme un cable sobre como logro conseguir mi objetivo de videos responsive? Muchas gracias por vuestra inestimable ayuda.

<div class="row">
<div class="col-lg-8">

<iframe src="https://player.vimeo.com/video/107153713?color=ffffff&title=0&byline=0&portrait=0" width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe>

</div>
<div class="col-lg-4">
<br>
<ul>
<li style="text-align: left;"><a href="https://www.airbnb.es/s/Barcelona--Spain?s_tag=wuAsvImg" target="_blank">Accomodation</a>, any difficulties?</li>
</ul>
</div>
</div>

kanikase · 19 May 2016

HTML:

<iframe src="https://player.vimeo.com/video/107153713?color=ffffff&amp;title=0&amp;byline=0&am p;portrait=0" frameborder="0" allowfullscreen="allowfullscreen" style="width:100%height:360px;"></iframe>

:encouragement::encouragement:

victorhemanuel · 19 May 2016

Haber usa esto:

HTML:

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.5,user-scalable=no">

<style>
#REPRO-VIDEO {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
display:block;
}

#REPRO-VIDEO iframe,
#REPRO-VIDEO object,
#REPRO-VIDEO embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>

<div id="REPRO-VIDEO" class="REPRO-VIDEO">
<iframe src="https://player.vimeo.com/video/107153713?color=ffffff&amp;title=0&amp;byline=0&am p;portrait=0" width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
</div>

Retira la meta en caso lo tengas ya adicionado.

javiadrados24 · 20 May 2016

Hola [MENTION=81006]kanikase[/MENTION], gracias por tu respuesta. Acabo de probar este codigo que me has pasado, cambiando el width por 100%, y al visualizarlo en desktop, queda muy pequeño, es decir...que esta solución (la cuál te agradezco por tu tiempo) no sirve.

- - - Actualizado - - -
[MENTION=132127]victorhemanuel[/MENTION] gracias por tu respuesta. Voy a comprobar si logro entender el CSS y meter este código, puesto que no entiendo muy bien esto, y tendré que pedir ayuda para meterlo y no joder nada. Un saludo, y luego vuelvo a comentar si se ha solucionado o no! Gracias

Crear código para videos responsivos

javiadrados24

kanikase

victorhemanuel

javiadrados24

Temas similares

Privacidad y transparencia

Privacidad y transparencia