Una búsqueda recurrente que he tenido que realizar a lo largo de varios proyectos es insertar un video de YouTube en una web a través de su URL, es decir que al tener la URL ya aparezca el vídeo, no me valía con pegar el código generado desde la propia plataforma de YouTube.

Es decir, disponía de algo tipo a https://www.youtube.com/watch?v=6QpL_ix5RSQ, pero tenía que presentar, de forma automática, el vídeo:

En esos casos, la URL del video de YouTube se tenía almacenada en la base de datos del WordPress, el requisito era que a través de la URL se mostrará el iframe con el video de YouTube y que además fuera responsive.

Para ello se utilizó el siguiente código dentro de los correspondientes ficheros del tema hijo:

//[...]
$video_url = get_post_meta( get_the_ID(), 'youtube_url', true ); 

if($video_url) {  ?> 
    <div class="video-responsive-featured"> <?php echo 
    preg_replace(
        "/\s*[a-zA-Z\/\/:\.]*youtu(be.com\/watch\?v=|.be\/)([a-zA-Z0-9\-_]+)([a-zA-Z0-9\/\*\-\_\?\&\;\%\=\.]*)/i",
    "<iframe width=\"100\" height=\"460\" src=\"//www.youtube.com/embed/$2\" frameborder=\"0\" scrolling=\"no\" allowfullscreen></iframe>",
    $video_url
    ); ?>
   </div>
<?php }
//[...]

La clase «video-responsive-featured» contiene el tratamiento para que el vídeo tenga las proporciones adecuadas en todos los dispositivos.

En esta entrada se explica cómo hacer un video de YouTube responsive.

¡Valora este artículo y ayúdame a mejorar la calidad del blog!
(Votos: 0 Promedio: 0)