Lamento mucho la ausencia amigos, aca en mi blog de carluys les explico un poco sobre mi falta. bueno recuperemos el tiempo perdido, 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:
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.
Pasos para la integración de los vídeos en Vimeo iframe incrustar lo siguiente:
para poner en práctica el video iframe para incrustar YOUTUBE es el siguiente:
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:
O para mostrar el tamaño de la imagen de acuerdo con el tamaño original puede utilizar css de la siguiente manera:
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...
Referencias:
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:
[<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.
[ .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:
[ <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:
[ <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:
[ 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:
[ 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...
Referencias:
