Press "Enter" to skip to content

WordPress shortcode voor responsive embed video middels Bootstrap

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.

Marco van der Ziel
Marco van der Ziel

View all posts

Geef een reactie