EMBEBIDOS RESPONSIVE

Hemos observado a lo largo de esta aventura digital que la estructura web actual combina HTML5 y CSS3 de manera tal que los resultados sean siempre responsive, es decir, que puedan observarse en cualquiera tamaño de pantalla y navegador moderno disponible en los diferentes dispositivos electrónicos de la actualidad.

Sin embargo, los nuevos elementos HTML5 toman en cuenta recursos o productos generados por nosotros mismos, pero el proceso de embebido o inclusión de una tercera codificación en nuestro sitio web suele no respetar las características responsive de la estructura.

Por ejemplo, para embeber o insertar un video YouTube dentro de mi sitio web, anteriormente debía colocar un código gigantesco en el que destacaban los elementos <object> y <embed> como vemos el ejemplo a continuación:

CODIGO ANTIGÜO <object width="425" height="344"> <param name="movie" value= "http://www.youtube.com/Âv/9sEI1AUF" /> <param name="allowFullScreen" value="true" /> <param name="allowscriptaccess" value="always" /> <embed src= "http://www.youtube.com/ Âv/9sEI1AUF" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"> </embed> </object>

Obviamente, este código entrega los parámetros de ancho y alto del video como cualquier recurso de terceros para ser embebido y eso lo convierte de manera automática en un recurso no responsive, es decir, que no cumple con los actuales estándares web actuales para ser visualizado en dispositivos móviles.

Esto deja por fuera no sólo a los videos YouTube, Vimeo o DailyMotion, sino también a herramientas valiosas como SoundCloud, Twitter, Google Maps, Instagram, Vine, Storify y muchos más.

La combinación de elementos HTML5 y CSS3 puede dar solución a este inconveniente. A continuación podrás encontrar el proceso resumido en 4 etapas:

1. Estilo CSS3
2. Contenedor HTML5
3. Código de embebido
4. Edición del código

1. ESTILO CSS3
Al insertar el siguiente código de estilo en el archivo main.css, dentro de la sección "Author's custom styles" (línea 154 aprox.) permite que el recurso de un tercero se adapte de forma responsive, en nuestro sitio web. A este código se le llama "Código embebido".

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

2. CONTENEDOR HTML5
Dentro de nuestro documento "index.html" debemos generar un espacio que contendrá el recurso embebido. 
Este espacio se denomina contenedor y es el que buscará el estilo descrito en el CSS3. 
Se debe insertar dentro del "Section" (línea 50 aprox), y dentro del "Footer" (línea 90 aprox.).

El código que debemos insertar en el lugar donde estará el embebido es:

CODIGO HTML5 <p><div class='embed-container'> aquí va el código de embebido editado </div> </p>

3. CÓDIGO DE EMBEBIDO

Normalmente en los recursos o herramientas de la web 2.0 y 3.0 tenemos la opción de compartir lo que estamos observando, entre estas opciones encontramos la de insertarlo en nuestro sitio web. Cuando seleccionamos inserción, el sitio nos entrega un código para que lo agreguemos a nuestro sitio web, este es el código de embebido.

4. EDICIÓN DEL CÓDIGO

El código de embebido contiene parámetros de alto, ancho, relación, publicidad, enlaces, etc. que deben ser retirados para que no generen conflicto con nuestro recurso incrustado, como lo muestra el ejemplo a continuación con un video de YouTube:

CÓDIGO ORIGINAL <iframe width="560" height="315" src="https://www.youtube.com/embed/Y422egdg5X4" frameborder="0" allowfullscreen> </iframe> CODIGO EDITADO <iframe src="https://www.youtube.com/embed/Y422egdg5X4" frameborder="0" allowfullscreen> </iframe>

Luego de desarrollar cada una de estas etapas, nuestro recurso embebido tendrá los estándares de un sitio web responsive y se adaptará adecuadamente a todo tipo de pantalla y dispositivo.