Het volgende kan voorkomen in WordPress: Je wilt een YouTube video insluiten, maar de video wordt in een vierkant kader getoond. Gevolg: je ziet een zwarte balk boven en onder de video. Dat wil je niet.
Zwarte balken boven en onder de YouTube video
Video’s worden tegenwoordig in een verhouding van 16:9 opgeslagen en getoond. Vervelend dus als jouw website de video in een vierkant kader toont wanneer je hem insluit op je webpagina. Maar er is een manier om dit op te lossen. Je kunt dus van die hinderlijke zwarte balken af komen. En het is nog niet eens zo heel moeilijk. Je hoeft alleen maar wat CSS toe te voegen aan je stylesheet en je zwarte balken verdwijnen als sneeuw voor de zon. Je video wordt netjes in de goede verhouding getoond.
Zorg ervoor dat je een child thema hebt, zodat je css niet wordt overschreven bij een update van het thema. Of zet het in de extra css in de customizer, die wordt ook niet overschreven. Maar liever gebruik ik die niet en gebruik ik de stylesheet van het child-thema. Dit heeft te maken met het aantal .css bestanden dat moet worden ingeladen, maar die uitleg zal ik je hier besparen.
De oplossing
Kopieer onderstaande CSS-code en plak het in je eigen css bestand. Je zult zien dat de zwarte balken zijn verdwenen!
.embed-youtube, .wp-block-embed__wrapper {
position: relative;
padding-bottom: 56.25%; /* Dit zorgt voor een 16:9 verhouding */
height: 0;
overflow: hidden;
max-width: 100%;
background: #000; /* optioneel: voor een achtergrondkleur */
}
.embed-youtube iframe, .wp-block-embed__wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}