web-dev-qa-db-fra.com

Comment écraser youtube embed?

J'aime vraiment comment vous pouvez simplement coller une URL directement dans le post ... tels que:

http://youtube.com/watch?v=xyz ou http://vimeo.com/123456

Ce que je veux faire, c'est changer le code par défaut pour que cela prenne en charge le code à partir d'ici: http://embedresponsively.com/

Comment puis-je remplacer le code youtube et vimeo, je suppose en quelque sorte dans functions.php?

phpfunctionsfiltersembedvideos
2
Tallboy

En regardant de plus près le code fourni sur ce site, il apparaît que les principales différences avec ce qu'il produit par défaut par WordPress sont les suivantes:

  • l'iframe est encapsulé avec un div ayant une classe de embed-container
  • il y a des styles CSS qui sont utilisés par cette classe

Dans WordPress, pour encapsuler l'iframe incorporé, ajoutez ce qui suit au functions.php de votre thème ou à un plugin de fonctionnalité:

add_filter('embed_oembed_html', 'my_embed_oembed_html', 99, 4);
function my_embed_oembed_html($html, $url, $attr, $post_id) {
return '<div class="embed-container">' . $html . '</div>';
}

et ajoutez le CSS généré par http://embedresponsively.com/ à votre thème:

.embed-container { 
position: relative; 
padding-bottom: 56.25%; 
padding-top: 30px; 
height: 0; 
overflow: hidden; 
max-width: 100%; 
height: auto;
} 

.embed-container iframe, .embed-container object, .embed-container embed { 
position: absolute; 
top: 0; 
left: 0; 
width: 100%; 
height: 100%;
}

J'ai testé le filtre et cela a bien fonctionné. Je n'ai pas testé le CSS, ce sera à vous de jouer.

Source du filtre: http://wordpress.org/support/topic/adding-a-wrapping-div-to-video-embeds?replies=2

1
richardmtl