How do I stretch an iframe with video to its parent?

Question

With CSS it's possible to stretch an image and change the ratio to fully cover the parent div. The image will even resize if the parent is responsive. It is possible to do so with a video (iframe)?

EDIT: I want to make sure I won't get black bars. EDIT: Altered title as this problem concerns a video and the duplicate answer does not.

score -1 · Answer 1 · answered Jun 10 '16 at 15:21

-1

Yes. you can give the iframe and id, and them costumise the id in your css file. simply just type the following code:

.theid {
width : 100% ;
height : 100% ;


}

and you are done

answered Jun 10 '16 at 15:21

Orfeo Terkuci

1
1

1

#theid { width: ... – Igor Jun 10 '16 at 15:23
That gives me black bars to keep the aspect ratio of the video. – josh Jun 10 '16 at 15:29

score -1 · Answer 2 · answered Jun 10 '16 at 15:23

Hmm.. Did you try to put the video on a div, and apply width=100% to the video?

Something like this:

<div class="parent">
    <iframe class="child"></iframe>
</div>

And the CSS:

.parent{
    width: 600px //your width here
}
.child{
    width: 100%;
}

score -1 · Answer 3 · answered Jun 10 '16 at 15:23

-1

You could add width="100%" height="100%" to the iframe. doing so will make the iframe stretch the length of the parent div.

answered Jun 10 '16 at 15:23

Nique Joe

492
5
18

How do I stretch an iframe with video to its parent?

3 Answers3