Er zijn verschillend  manieren of plug-ins om embedden video’s goed responsive weer te geven in een WordPress website.

Het Framework Bootstrap voorziet al in het responsive weergeven van embedded video:

http://getbootstrap.com/components/#responsive-embed

Omdat er wat extra code om het iframe gezet moet worden leek het me handig dit te doen door middel van een shortcode.

Plaats deze code voor het registreren van de shortcode in functions.php van je actieve (child-)theme:

function youtube( $atts ) {

  extract( shortcode_atts(
  array(
  'slug' => '',
  ), $atts )
  );

return '<div class="embed-responsive embed-responsive-16by9">' . '<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/' . $slug . '?rel=0&color=red&vq=hd1080&showinfo=0" frameborder="0" allowfullscreen></iframe>' . '</div>';
}
add_shortcode( 'youtube', 'youtube' );

Plaats vervolgens de volgende shortcode in de WordPress editor:

[youtube slug="dQw4w9WgXcQ"]

Waarbij je bij slug het ID van de video zet.

Geef een reactie