Añadir un Responsive Video, Iframe, Embed, Object y img en tu sitio o blog con HTML5

Mensajes
2
Puntuación de reacción
0
Hoy vamos a ver como añadir Video, Iframe, Embed, Object y img de forma responsive en nuestro sitio web o blog.

Actualmente el incrustador de videos youtube es el mas utilizado, pero aparte de youtube algunos se plantan directamente en su propio alojamiento o almacenamiento y por lo general para llamar usando la etiqueta <video>.

a continuación es un ejemplo de código de inserción de las más ampliamente utilizado:

HTML:
<video width="500" height="400" src="..."></video>
<iframe width="500" height="400" src="..."></iframe>
<object width="500" height="400" src="..."></object>
<embed width="500" height="400"  src="..."></embed>

Crear la respuesta al video en un iframe es fácil ya que el manejo sensible de rejilla o layaout se establece a través de CSS. A continuación se muestra un ejemplo de CSS para hacer que el video en tamaño completo coincida con el tamaño de la anchura del blog elemento div.

Código:
.VideoWrapper {
 position: relative;
 padding-bottom: 56.25%; /* 16:9 */
 padding-top: 25px;
 height: 0;
}
.VideoWrapper iframe, video, object, embed {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
}

Pasos para la integración de los vídeos en Vimeo iframe incrustar lo siguiente:

HTML:
<div class="VideoWrapper">
<iframe src="link video" width="700" height="385"></iframe>
</div>

para poner en práctica el video iframe para incrustar YOUTUBE es el siguiente:

Código:
<div class="VideoWrapper">
<iframe height="357" src="http://www.youtube.com/embed/m5_AKjDdqaU?rel=0&hd=1" width="670"></iframe>
</div>

Para Responsive imagen / foto en un img Picture (imagen) si usamos el valor unitario de las em y px ejemplo como width:900px y height:700px no se ejecutará en el Responsive, entonces cambiamos el uso de valor unitario % es decir, como: width:80% y height:80%. pero también no tenemos que utilizar siempre el valor unitario % , pero también podemos utilizar medidas alternativas de auto en su lugar. para superar el tamaño de la imagen que superan el elemento padre podemos utilizar max-width:100% de esta manera se utiliza con el fin de ajustar el tamaño de la imagen en sí proporcionalmente.

Este principio también se aplica a las iframe, objetos y videos, los ejemplos más comunes css ver a continuación:

Código:
img{
max-width:100%
}

O para mostrar el tamaño de la imagen de acuerdo con el tamaño original puede utilizar css de la siguiente manera:

Código:
img{
height:auto;
width:auto;
max-width:100%
}

así que el truco anterior es muy fácil y aplicado para cambiar la vista en una sensible y optimizada, así que por favor utiliza este método. espero puede ser útil...

Fuente: OnSoni
 
Arriba