Want create site? Find Free WordPress Themes and plugins.

A partir de la versión 3.5 de WordPress, desaparecieron un par de opciones del panel “Medios”. Por un lado, la ubicación de la carpeta de imágenes (menuda gracia) y, por el otro, el tamaño de los archivos anidados (vídeos, iframes, etc.).

Para recuperar esto último, es tan fácil como aplicar este código en el functions.php de la plantilla:

// Change the width of an automatic embed
add_filter( 'embed_defaults', 'bigger_embed_size' );
function bigger_embed_size()
{ 
 return array( 'width' => 620, 'height' => 450 );
}

Esto cambia el tamaño del <iframe> que, por defecto, son 500 píxeles.

Responsive design

Pero, para que se ajuste al tamaño del navegador, tenemos que seguir los siguientes pasos que ofrece John Surdakoswi en el artículo “Responsive Youtube Embed“:

Functions.php

// Add video-container div to embed iframes
function responsive_embed($content){
$content = str_replace('<iframe', '<div class="video-container"><iframe', $content);
$content = str_replace('</iframe>', '</iframe></div>', $content);
return $content;
}
add_filter('the_content', 'responsive_embed');
add_filter('the_excerpt', 'responsive_embed');

HTML

<div class="video-container">
 <iframe src="https://www.youtube.com/watch?v=FIujL4JYkQE" frameborder="0" width="560" height="315"></iframe>
</div>

CSS

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

Resultado

Aquí lo tenemos:

Did you find apk for android? You can find new Free Android Games and apps.

Posted by Hans Christian

Freelance , & en Barcelona, especializado en proyectos de contenidos. Imparto cursos de WordPress. Currículum.