YouTube insluiten toont vierkante video

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.

.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%;
}