Youtube Videos automatisch Responsive in WordPress einbinden
23. Januar 2015
Beim entwickeln und anpassen von WordPress Templates gibt es oft ein Problem. Embedded Videos sind meist nicht Responsive. Doch mit einer weiteren Filter Funktion ist dies gelöst. [php]add_filter( ’embed_oembed_html’, ‘custom_oembed_filter’, 10, 4 ) ; function custom_oembed_filter($html, $url, $attr, $post_ID) { $return = ‘<div class="video-container">’.$html.'</div>’; return $return; }[/php] Diese Funktion fügt den Video Containern automatisch ein […]
Beim entwickeln und anpassen von Wordpress Templates gibt es oft ein Problem.
Embedded Videos sind meist nicht Responsive. Doch mit einer weiteren Filter Funktion ist dies gelöst.
[php]add_filter( 'embed_oembed_html', 'custom_oembed_filter', 10, 4 ) ;
function custom_oembed_filter($html, $url, $attr, $post_ID) {
$return = '<div class="video-container">'.$html.'</div>';
return $return;
}[/php]
Diese Funktion fügt den Video Containern automatisch ein Div mit dazugehöriger Klasse hinzu.
Nun fehlt natürlich noch die CSS.
[html].video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px; height: 0; overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}[/html]
Das Endergebnis sieht so aus.
[html]<div class="video-container">
<iframe src="http://www.youtube.com/embed/ROSUWwD62zs" frameborder="0" width="560" height="315"></iframe>
</div>[/html]
Kommentare
Kommentare werden geladen...