YoutubeVideo inside Iframe isn’t properly sized


This Content is from Stack Overflow. Question asked by Frodo_nicitel

I have a problem with sizing YouTube video inside iframe element.

The best i can do is the example on the screenshot. I can’t get rid of the black bars on the sides.

enter image description here

Here is my scss `youtube-video {
display: flex;
background-color: black;

.videoContainer {
    @include maximized;

    iframe {
        @include maximized;

Setting iframe position:absolute and videocontainer:relative isn’t working.

The mixins maximized include sets the height and width to 100%.

frameBorder is set to 0

Aspect ratio is calculated properly from the width and height of the video.

Can somebody please help me ?


This question is not yet answered, be the first one who answer using the comment. Later the confirmed answer will be published as the solution.

This Question and Answer are collected from stackoverflow and tested by JTuto community, is licensed under the terms of CC BY-SA 2.5. - CC BY-SA 3.0. - CC BY-SA 4.0.

people found this article helpful. What about you?