Youtube responsief maken in WordPress 5.x blokken

Vanaf WordPress 5.0 kan je heel makkelijk Youtube-video’s toevoegen.
De lijst van insluit-mogelijkheden is best lang:

Overzicht van insluit-mogelijkheden

Het probleem van deze insluitingen is dat ze met iframes werken. Een iframe laadt externe inhoud in op je website in een bepaalde breedte en hoogte, zie:

Een iframe van 1200px breed kan je inhoudsveld overlappen.
Dit zie je hieronder.

Je WordPress insluitblokken zijn dus nog niet responsief.
Gebruik deze stylesheet code om alle insluitblokken meteen responsief te maken.

.wp-block-embed {
    position: relative; 
    overflow: hidden;  
    padding-top: 56.25%;
}
.wp-block-embed iframe {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   border: 0;
 }

Nieuwe WordPress tips meteen in je mailbox.

Simpel. Snel. Leerrijk. Leuk.

Volg Woofers op social media voor méér WordPress tips & tricks.

Vragen of bemerkingen over dit artikel?

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *