Videos in WordPress responsive einbinden

Um Videos in WordPress einzubinden genügt es, dessen URL im Editor in einer separaten Zeile einzufügen. Im Visuell-Tab des Editors wird das Video dann auch automatisch nach wenigen Augenblicken angezeigt.

Standardmäßig wird das Video aber nicht responsive eingebunden. Das heißt, auf schmalen Bildschirmen, oder wenn das Fenster des Webbrowsers verkleinert wird, erscheint das Video abgeschnitten. Damit das Video aber wirklich responsiv wird, muss im Template folgende Änderung gemacht werden:

Datei function.php

/* Container zu eingebetteten Videos hinzufügen
 /* ------------------------------------ */ 
 function alx_embed_html( $html ) {
 return '<div class="video-block">' . $html . '</div>';
 }
 add_filter( 'embed_oembed_html', 'alx_embed_html', 10, 3 );
 add_filter( 'video_embed_html', 'alx_embed_html' ); // für Jetpack

Datei style.css

/* Videos responsive machen
 -------------------------------------------------------------- */
 
 .video-block{ position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; }
 .video-block iframe, .video-block object, .video-block embed, .video-block video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

Achtung: Bei einem Update des Templates werden diese Änderungen eventuell überschrieben. Deshalb, sollten, wie auch bei Anderen Änderungen an den Template-Dateien Child-Themes verwendet werden.

Leave a Comment

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

*
*