\u00bfAlguna vez has querido redimensionar un video sobre la marcha, tal como lo har\u00edas con una imagen? Con dimensiones intr\u00ednsecas es posible. Esta t\u00e9cnica permite que los navegadores determinen las dimensiones del video, con base en el tama\u00f1o del ancho del bloque contenedor.<\/p>\n\n\n\n
Con dimensiones intr\u00ednsecas, una nueva anchura provoca un nuevo c\u00e1lculo de la altura, permitiendo a los videos ser redimensionados, d\u00e1ndoles la habilidad de escalar de la misma manera que lo hacen las im\u00e1genes. Revisa el primer ejemplo<\/a>.<\/p>\n\n\n\n La idea es crear un contenedor con la proporci\u00f3n correcta (4:3, 16:9, etc.), y luego hacer que el video dentro del contenedor se extienda para ajustarse a las dimensiones del contenedor. Es as\u00ed de simple.<\/p>\n\n\n\n La propiedad Las reglas CSS de abajo, ilustran c\u00f3mo le damos estilo al padre y al hijo, para crear una \u201cenvoltura m\u00e1gica\u201d\u2500un contenedor que se redimensiona a s\u00ed mismo de manera proporcional dependiendo dela medida del ancho de su padre. Revisa el segundo ejemplo<\/a>.<\/p>\n\n\n\n Repasemos las declaraciones en cada regla, comenzando con Ahora, consideremos cada declaraci\u00f3n dentro de nuestra regla El tercer ejemplo<\/a> utiliza un video de YouTube (con markup<\/em> de YouTube), por lo que necesitamos hacer espacio para el wrapper<\/em>. N\u00f3tese que la altura del wrapper<\/em> es est\u00e1tica: tiene 25 p\u00edxeles de alto, sin importar las dimensiones del video. Tambi\u00e9n cambiamos el valor del Ech\u00e9mos un vistazo m\u00e1s de cerca a nuestros nuevos selectores y declaraciones, comenzando por el selector Ahora, es momento de examinar un par de declaraciones bajo el selector Finalmente, utilizamos el selector Nota:<\/strong> Estoy utilizando el markup<\/em> de YouTube por ahora, pero al final del art\u00edculo estar\u00e9 utilizando markup<\/em> v\u00e1lido y necesitar\u00e9 utilizar Para lograr que esto funcione en Internet Explorer, simplemente a\u00f1adiremos un contenedor extra. (Nunca dije que ser\u00eda bello y limpio). Mira el ejemplo cuatro<\/a>.<\/p>\n\n\n\n Veamos m\u00e1s de cerca a nuestros nuevos selectores y declaraciones, comenzando con el selector Ahora, veamos nuestro selector Finalmente, el selector Nota:<\/strong> Utilizamos Para lograr que esta soluci\u00f3n sea m\u00e1s vers\u00e1til, removemos las declaraciones Ahora veamos las nuevas clases, comenzando con Cuando se trata de videos, soportar est\u00e1ndares web no es cosa f\u00e1cil. Primero, la mayor\u00eda de los provedores no codifican et\u2019s (s\u00edmbolo &). A\u00fan m\u00e1s com\u00fanmente, la mayor\u00eda depende del m\u00e9todo <\/em>twice-cooked<\/em><\/a>(Utilizando el elemento no est\u00e1ndar Para lograr que nuestro markup<\/em> est\u00e9 acorde al est\u00e1ndar, primero debemos reemplazar todos los et\u2019s en las URLs con \u201c La t\u00e9cnica de \u00fanico objeto<\/em> facilita la generaci\u00f3n de c\u00f3digo seg\u00fan se va \u201cretomando\u201d en un solo lugar el elemento Puesto que tenemos un elemento posicionado absolutamente dentro de la caja, podemos esconder el contenido \u201cdetr\u00e1s\u201d del video. Nota:<\/strong> este contenido se encuentra fuera<\/em> del objeto. No es \u201ccontenido alternativo\u201d por as\u00ed decirlo. Mira el ejemplo siete<\/a>.<\/p>\n\n\n\n Para automatizar este m\u00e9todo, podemos utilizar el script<\/em> SWFObject para a\u00f1adir la clase Para a\u00f1adir el c\u00f3digo que necesitamos, reemplazamos la siguiente l\u00ednea en SWFObject v1.5 (cerca de la l\u00ednea 117):<\/p>\n\n\n\n Con las siguientes l\u00edneas:<\/p>\n\n\n\n Y eso es todo. Con un poco de CSS y tu nuevo know-how<\/em>, tambi\u00e9n t\u00fa puedes redimensionar y escalar videos sobre la marcha. Ve lo que puedes hacer con el m\u00e9todo de proporci\u00f3n intr\u00ednseca y comparte tus resultados en los comentarios.<\/p>\n\n\n\n \u00bfAlguna vez has querido cambiar el tama\u00f1o de un v\u00eddeo sobre la marcha, escal\u00e1ndolo como lo har\u00edas con una imagen? Con la ayuda de los ratios intr\u00ednsecos del v\u00eddeo y la magia de las propiedades de relleno, puedes hacerlo. Thierry Koblentz nos muestra c\u00f3mo hacerlo. <\/p>\n","protected":false},"author":601,"featured_media":167,"comment_status":"open","ping_status":"closed","template":"","categories":[24,52,20,25],"tags":[],"coauthors":[51],"class_list":["post-166","article","type-article","status-publish","has-post-thumbnail","hentry","category-css","category-diseno-adaptable","category-html","category-javascript"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/alistapart.com\/es\/wp-json\/wp\/v2\/article\/166","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/alistapart.com\/es\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/alistapart.com\/es\/wp-json\/wp\/v2\/types\/article"}],"author":[{"embeddable":true,"href":"https:\/\/alistapart.com\/es\/wp-json\/wp\/v2\/users\/601"}],"replies":[{"embeddable":true,"href":"https:\/\/alistapart.com\/es\/wp-json\/wp\/v2\/comments?post=166"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/alistapart.com\/es\/wp-json\/wp\/v2\/media\/167"}],"wp:attachment":[{"href":"https:\/\/alistapart.com\/es\/wp-json\/wp\/v2\/media?parent=166"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/alistapart.com\/es\/wp-json\/wp\/v2\/categories?post=166"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/alistapart.com\/es\/wp-json\/wp\/v2\/tags?post=166"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/alistapart.com\/es\/wp-json\/wp\/v2\/coauthors?post=166"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}El Concepto<\/h2>\n\n\n\n
El Truco<\/h2>\n\n\n\n
padding<\/code> es la magia que le da estilo al contendor con una proporci\u00f3n intr\u00ednseca<\/em>. Esto es porque definiremos el padding<\/code> en un porcentaje<\/em>, con base en la anchura<\/strong> del bloque contenedor.<\/p>\n\n\n\n.wrapper-with-intrinsic-ratio {
position: relative;
padding-bottom: 20%;
height: 0;
}.element-to-stretch {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: teal;
}<\/code><\/pre>\n\n\n\n.wrapper-with-intrinsic-ratio<\/code>.<\/p>\n\n\n\nposition: relative<\/strong><\/code>\nAl declarar position: relative<\/code> todos los elementos descendientes se posicionar\u00e1n a s\u00ed mismos en relaci\u00f3n a este contenedor.<\/pre>\n\n\n\npadding-bottom: 20%<\/strong><\/code>\nEsta declaraci\u00f3n le da al contenedor un formato<\/em> espec\u00edfico. Utilizando 20% para el padding<\/code> hace que la altura del contenedor sea igual al 20% de su anchura.\n\nEspec\u00edficamente elegimos utilizar padding-bottom<\/code> en vez de padding-top<\/code>. Esto es porque IE5 remueve<\/em> el \u201cespacio\u201d creado por medio de padding-top<\/code> del flujo. En otras palabras, utilizando padding-top: 20%<\/code> crear\u00eda el dise\u00f1o que queremos, pero el contenedor actuar\u00eda como un elemento absolutamente posicionado, superponi\u00e9ndose a los siguientes elementos en el flujo.<\/pre>\n\n\n\nheight: 0<\/strong>\nAl especificar una altura de
0<\/code> le damos a este elemento un \u201cdise\u00f1o\u201d con el cu\u00e1l tanto IE5 como IE6 dimensionar\u00e1n el contenedor interior de manera correcta. Para aprender m\u00e1s, visita \u201cOn having layout<\/a>\u201d.\n\nNota:<\/strong> ya que IE5 y IE6 tratan width<\/code> como si fuera la anchura m\u00ednima, no<\/em> deber\u00edas utilizar width: 100%<\/code> para desencadenar algo en el dise\u00f1o. Esto causa que la caja se expanda para rellenar su contenedor, en vez de respetar la anchura que definimos para el contenedor.<\/pre>\n\n\n\n.element-to-stretch<\/code>.<\/p>\n\n\n\nposition: absolute<\/strong>\nEsto libera al elemento de la altura l\u00edmite de su padre. De esta manera, puede ser posicionado sobre el \u201c\u00e1rea del
padding<\/code>\u201d.<\/pre>\n\n\n\ntop: 0<\/strong>\nDefinimos
top: 0<\/code> para posicionar el contenedor cerca de la parte superior de su padre.<\/pre>\n\n\n\nleft: 0<\/strong>\nEsta declaraci\u00f3n posiciona el contenedor cerca del lado izquierdo de su padre.<\/pre>\n\n\n\n
width: 100%<\/strong>\nAl declarar
width: 100%<\/code> hacemos que la caja se estire para rellenar la anchura de su contenedor.<\/pre>\n\n\n\nheight: 100%<\/strong>\nEsta declaraci\u00f3n hace que la caja se expanda para completar la altura de su contenedor.<\/pre>\n\n\n\n
background: teal<\/strong>\nAplicamos un color para revelar el dise\u00f1o del contenedor.<\/pre>\n\n\n\n
El Trato Real<\/h2>\n\n\n\n
padding<\/code> para desplegar el video en un formato de pantalla amplia (16:9).<\/p>\n\n\n\n#containingBlock {
width: 50%;
}.videoWrapper {
position: relative;
padding-bottom: 56.25%;
padding-top: 25px;
height: 0;
}object,
embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}<\/code><\/pre>\n\n\n\n#containingBlock<\/code>.<\/p>\n\n\n\nwidth: 50%<\/strong>\nEste es \u00fanicamente un contenedor para mostrar el cambio de tama\u00f1o del video, con respecto al ancho de la ventana.<\/pre>\n\n\n\n
.videoWrapper<\/code>.<\/p>\n\n\n\npadding-bottom: 56.25%<\/strong>\nPara crear una proporci\u00f3n de 16:9, debemos dividir 9 entre 16 (0.5625 o 56.25%).<\/pre>\n\n\n\n
padding-top: 25px<\/strong>\nPara evitar problemas con el modelo de caja rota<\/a> (IE5 o IE6 en modo quirks<\/em>), utilizamos
padding-top<\/code> en vez de height<\/code> para hacer espacio para el wrapper<\/em>.<\/pre>\n\n\n\nobject, embed<\/code> porque algunos navegadores dependen de object<\/code> (por ejemplo, Safari), mientras que otros utilizan embed<\/code> (por ejemplo, Firefox).<\/p>\n\n\n\nembed<\/code>.<\/p>\n\n\n\nLas Soluciones para Internet Explorer<\/h2>\n\n\n\n
#containingBlock {
width: 50%;
}.videoWrapper {
position: relative;
padding-top: 25px;
padding-bottom: 56.25%;
height: 0;
}* html .videoWrapper {
margin-bottom: 45px;
margin-bot\\tom: 0;
}.videoWrapper div,
.videoWrapper embed,
.videoWrapper object {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}<\/code><\/pre>\n\n\n\n.videoWrapper<\/code>.<\/p>\n\n\n\nheight: 0<\/strong>\nTal como lo vimos con el ejemplo dos<\/a>, IE5 y IE6 necesitan \u201cdise\u00f1o\u201d.<\/pre>\n\n\n\n
* html .videoWrapper<\/code>. Llamado el \u201cstar html hack\u201d, este selector tiene sentido solo en IE6 y menor, puesto que solo estas versiones traducen las siguientes declaraciones:<\/p>\n\n\n\nmargin-bottom: 45px<\/strong>\nComo en el ejemplo dos<\/a>,
padding-top<\/code> crea algunos problemas en IE5. Aqu\u00ed utilizamos un valor arbitrario (que deber\u00eda funcionar con varios wrappers<\/em>) para compensar por el \u201cespacio\u201d perdido al utilizar padding-top<\/code>. Esto es para prevenir que el video se sobreponga a los elementos subsecuentes.<\/pre>\n\n\n\nmargin-bottom: 0<\/strong>\nLa notaci\u00f3n de escape (car\u00e1cter de barra invertida) con el nombre de la propiedad, act\u00faa como un filtro para definir un valor diferente para IE6. IE6 \u201cve\u201d esta declaraci\u00f3n, mientras que IE5 la ignora. Si prefieres utilizar comentarios condicionales en lugar de los filtros anteriores, si\u00e9ntete libre de mover estas declaraciones a hojas de estilo espec\u00edficas para IE, o elementos
style<\/code> en la cabecera del documento.<\/pre>\n\n\n\n.videoWrapper div<\/code> es el envoltorio extra que necesitamos para hacer funcionar las cosas en las versiones 5, 6 y 7 de Internet Explorer.<\/p>\n\n\n\n.videoWrapper div, .videWrapper embed,<\/code> y .videoWrapper object {}<\/code> en vez de .videoWrapper * {}<\/code> para prevenir darle estilo a contenido alternativo.<\/p>\n\n\n\nLa Limpieza<\/h2>\n\n\n\n
padding-top<\/code> de las reglas anteriores y las asociamos con clases. De esta manera, podemos f\u00e1cilmente darle estilo a videos con proporciones distintas y\/o wrappers<\/em>. Mira el ejemplo cinco<\/a>.<\/p>\n\n\n\n#containingBlock {
width: 50%;
}.videoWrapper {
position: relative;
height: 0;
}* html .videoWrapper {
margin-bottom: 45px;
margin-bot\\tom: 0;
}.videoWrapper div,
.videoWrapper embed,
.videoWrapper object {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}.wideScreen {
padding-bottom: 56.25%;
}.fourBYthree {
padding-bottom: 75%;
}.chrome_25 {
padding-top: 25px;
}.chrome_35 {
padding-top: 35px;
}<\/code><\/pre>\n\n\n\n.wideScreen<\/code>.<\/p>\n\n\n\n.wideScreen<\/strong>\nUtilizamos esta clase para darle estilo a
div.videoWrapper<\/code> con una proporci\u00f3n 16:9.<\/pre>\n\n\n\n.fourBYthree<\/strong>\nUtilizamos esta clase para darle estilo a
div.videoWrapper<\/code> con una proporci\u00f3n 4:3.<\/pre>\n\n\n\n.chrome_25<\/strong>\nEsta clase le da espacio al contenedor que tiene 25 p\u00edxeles de alto.<\/pre>\n\n\n\n
.chrome_35<\/strong>\nEsta clase le da espacio al contenedor que tiene 35 p\u00edxeles de alto.<\/pre>\n\n\n\n
El Problema con la Validaci\u00f3n<\/h2>\n\n\n\n
embed<\/code>).<\/p>\n\n\n\n&<\/code>\u201d. Luego, debemos implementar un m\u00e9todo de \u00fanico objecto<\/em>. A diferencia del m\u00e9todo de objetos anidados<\/a>, esta t\u00e9cnica proporciona con un \u00fanico objeto a los agentes de usuario, como el c\u00f3digo de ejemplo siguiente. Ve el ejemplo seis<\/a>.<\/p>\n\n\n\n<div id=\"containingBlock\">
<div class=\"videoWrapper\">
<div>
<!--[if IE]>
<object classid=\"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000\" width=\"480\" height=\"295\">
<param name=\"movie\" value=\"http:\/\/www.youtube.com\/v\/mDRYnaajUcY&hl=en&fs=1&showinfo=0\" \/>
<![endif]-->
<!--[if !IE]>-->
<object type=\"application\/x-shockwave-flash\" data=\"http:\/\/www.youtube.com\/v\/mDRYnaajUcY&hl=en&fs=1&showinfo=0\" width=\"480\" height=\"295\">
<!--<![endif]-->
<param name=\"quality\" value=\"high\" \/>
<param name=\"wmode\" value=\"opaque\" \/>
<p><a href=\"http:\/\/www.adobe.com\/go\/getflashplayer\">
<img alt=\"Get Adobe Flash player\" src=\"http:\/\/www.adobe.com\/images\/shared\/download_buttons\/get_flash_player.gif\"\/><\/a><\/p>
<\/object>
<\/div>
<\/div>
...
<\/div><\/code><\/pre>\n\n\n\n<object><\/code> en vez de en dos lugares <object><\/code> y <\/object><\/code>.<\/p>\n\n\n\nEl Bonus<\/h2>\n\n\n\n
<div id=\"containingBlock\">
<div class=\"videoWrapper\">
<div>
<!--[if IE]>
<object classid=\"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000\" width=\"480\" height=\"295\">
<param name=\"movie\" value=\"http:\/\/www.youtube.com\/v\/mDRYnaajUcY&hl=en&fs=1&showinfo=0\" \/>
<![endif]-->
<!--[if !IE]>-->
<object type=\"application\/x-shockwave-flash\" data=\"http:\/\/www.youtube.com\/v\/mDRYnaajUcY&hl=en&fs=1&showinfo=0\" width=\"480\" height=\"295\">
<!--<![endif]-->
<param name=\"quality\" value=\"high\" \/>
<param name=\"wmode\" value=\"opaque\" \/>
<p><a href=\"http:\/\/www.adobe.com\/go\/getflashplayer\"> <img alt=\"Get Adobe Flash player\" src=\"http:\/\/www.adobe.com\/images\/shared\/download_buttons\/get_flash_player.gif\"><\/a><\/p>
<\/object>
<\/div> <p>The following is the description of the video embeded in this
document.<\/p>
<p>This short clip is about YouTube widescreen formatting. It
shows the two main formats (16:9, 4:3) and also explains the best way to create a Flash movie according to the new widescreen format.<\/p>
<\/div>
...
<\/div><\/code><\/pre>\n\n\n\nEl Enfoque del Script SWFObject<\/h2>\n\n\n\n
.videoWrapper<\/code> que necesitamos para dar estilo y tambi\u00e9n para conectar el wrapper<\/em> que necesitamos para IE. Revisa el ejemplo ocho<\/a>. (Nota:<\/strong> en este \u00faltimo ejemplo, la anchura del bloque contenedor est\u00e1 definida en em<\/code>s).<\/p>\n\n\n\nn.innerHTML = this.getSWFHTML();<\/code><\/pre>\n\n\n\nn.className += \" videoWrapper\";
if (typeof document.documentElement.style.zoom != \"undefined\") {
var wrapper4ie = document.createElement(\"div\");
n.appendChild(wrapper4ie);
wrapper4ie.innerHTML = this.getSWFHTML();
} else {
n.innerHTML = this.getSWFHTML();
};<\/code><\/pre>\n\n\n\n*Traducci\u00f3n al espa\u00f1ol por Juan Pablo Yamamoto<\/a>.<\/em><\/h5>\n","protected":false},"excerpt":{"rendered":"