Responsive video’s in WordPress

De responsive ‘beweging’ is op internet de laatste tijd behoorlijk op stoom gekomen. Het is nu gewoon een ‘must’ om een website te hebben die op elk apparaat goed wordt weergegeven. Daar komt het responsive design om de hoek kijken. Nieuwe websites worden standaard voorzien van een responsive design. Bestaande websites worden vaak omgebouwd.

Als een website eenmaal responsive is moeten de YouTube video’s die in een website worden geëmbed natuurlijk ook meeschalen. In WordPress kunnen YouTube video’s heel eenvoudig worden ingevoegd door alleen de URL van de video op een eigen regel in de tekst te zetten. WordPress zorgt er vervolgens zelf voor dat de video direct op de website kan worden afgespeeld. De automatisch ingevoegde video’s worden ingeladen d.m.v. een iFrame. Standaard heeft een iFrame een vaste breedte en is dus niet responsive.

Om er voor te zorgen dat de YouTube video’s wel meeschalen in het responsive design kan je een <div> om de video’s plaatsen. Om dit elke keer handmatig te doen is vrij omslachtig dus daarom in deze blog een tip hoe je automatisch video’s responsive kunt maken binnen jouw WordPress thema.

Voeg onderstaande code toe aan je functions.php. Hiermee plaats je automatisch een <div> met de class “video-container” om de YouTube video heen.

//* Add video container for embedded video's
add_filter( 'embed_oembed_html', 'wrap_embed_with_div' );

function wrap_embed_with_div( $html, $url, $attr ) {
        return "<div class=\"video-container\">".$html."</div>";
}

Vervolgens is het zaak om met behulp van CSS de video-container en het iFrame zo te stijlen dat de video in de iFrame responsive is te maken. Door ook de ‘object’ en ‘embed’ elementen mee te nemen in de styling zorg je er ook voor dat andere diensten zoals Vimeo responsive worden weergegeven.

/**
* Responsive video
**/
.video-container {
	height: 0;
	margin-bottom: 2rem;
	overflow: hidden;
	padding-bottom: 56.25%;
	padding-top: 30px;
	position: relative;
}

.video-container iframe,
.video-container object,
.video-container embed {
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
}

Een eenvoudige manier om de video’s op jouw website responsive te maken zonder dat je hier een plugin voor nodig hebt. Als wij jou kunnen helpen met het responsive maken van jouw website, neem dan contact met ons op.