Vor kurzem habe ich gezeigt wie du ein Video responsiv in deinen Betrag einbetten kannst. Das funktioniert ganz gut ist aber zum Arbeiten eher unangenehm. Du musst ja jedes Mal in den HTML-Modus deines Editors wechseln um alles einzufügen. Praktischer wäre da einfacher ShortCode damit du dich nicht dauernd mit HTML ärgern musst.
Aber bevor wir anfangen stellst du aber sicher, dass du nicht im Original-Theme arbeitest, sondern bereits ein Child-Theme angelegt hast. Erst dann solltest du die Themefunktionen in der functions.php um den folgenden Code erweitern.
Die Themefunktionen mit einem Shortcode ergänzen
Dazu nimmst du den folgenden Code und fügst ihn einfach am Ende der functions.php ein. Du siehst jede Zeit ist mit einem Kommentar versehen, damit du auch verstehst, was hier programmiert wird. Es ist einfach wichtig, dass du nicht einfach irgendwoher Quellcode nimmst, welchen du nicht verstehst und dann in deinen Blog einfügst. Denn ohne es zu wissen, hast du dir vielleicht Schadcode eingefangen.
//Responsives Video von YouTube mit ShortCode einfuegen
function tmdn_embed_responsive_video($atts, $content = null) {
//Parameter einlesen
extract(shortcode_atts(array('video' => '',
'nocookie' => '1',
'autoplay' => '1',
'wrapper' => '1'), $atts));
//Video-Element initialisieren
$videoOut = '';
//falls keine Video-Code angegeben ist, nichts ausgeben
if ($video == '') {return '';}
//Wrapper-Element ausgeben
if ($wrapper == '1') {$videoOut .= '<div class="tmdn-video-container-wrapper">';}
//Video-Container ausgeben
$videoOut .= '<div class="tmdn-video-container">';
//Datenschuetz respektieren
$videoOut .= '<iframe src="https://www.youtube';
if ($nocookie == '1') {$videoOut .= '-noocokie';}
//Video einbetten
$videoOut .= '.com/embed/'.$video.'" frameborder="0" allow="accelerometer; ';
if ($autplay == '1') {$videoOut .= 'autoplay; ';}
$videoOut .= 'encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>';
//Video-Container schliessen
$videoOut .= '</div>';
//Wrapper-Element schliessen
if ($wrapper == '1') {$videoOut = '</div>';}
//Komplettes Video-Element zurueckgeben
return $videoOut;
}
add_shortcode('tmdn_video', 'tmdn_embed_responsive_video');
Das Video in einen Beitrag einfügen
Das ist jetzt gar nicht mehr so schwierig, denn du hast ja jetzt einen ShortCode. Du kannst also folgendes direkt in deinem Editor einfügen.
[tmdn_video video='wGobXmyCnfI' wrapper='0']Damit wird dasselbe Video wie bei der HTML/CSS-Version eingebunden. Denn der Wert bei video angegeben wurde, ist exakt die Kombination, welche YouTube in der URL bei v= verwendet, eben die Video-ID. In diesem Fall will ich es in der vollen Spalten- bzw. Seitenbreite anzeigen und habe das Wrapper-Element mit 0 ausgeschaltet.
[tmdn_video video='wGobXmyCnfI' autoplay='0' nocookie='0']Mit diesem Shortcode wird auch wieder das Video eingebettet, aber dieses Mal nicht in der vollen Breite und es wird nicht automatisch gestartet und auch der Datenschutz ist abgeschaltet.
Natürlich musst du für das responsive einbetten des Videos noch den Teil des Stylesheets aus meinem Post über responsive Videos in deine style.css einfügen. Sonst siehst du den gewünschten Effekt natürlich nicht.
