CODEWITHSUNDEEP
cssiframeyoutubeyoutube-iframe-api
CharlyAnderson
CharlyAnderson

Reputation: 737

Iframe video 100% width

I am trying to get a YouTube video to display at 100% width and height. It seems the iframe itself is doing what I want, however, once the video plays it is only 100% width up to 1100px.

I have tried searching the web but cannot find a solution to get the video itself to be the same width as the video poster and iframe width.

Upvotes: 0

Views: 3344

Answers (3)

Thuy Pham
Thuy Pham

Reputation: 57

I assume your video ratio is 16:9. Maybe you can try this:

.container {
  width: 100vw;
  height: 56.25vw;
}
.video {
  width: 100%;
  height: 100%;
}

This is an example link

Upvotes: 2

pradeep1991singh
pradeep1991singh

Reputation: 8365

Try this:

.container {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
}
.video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
<div class="container">
<iframe src="https://www.youtube.com/embed/ZLyS2wHiZM8" 
frameborder="0" allowfullscreen class="video"></iframe>
</div>

Reference article

Upvotes: 2

Slabre
Slabre

Reputation: 149

Your video has already a 100% width. When I make a right-click on the left or right side of the video, the context menu of the youtube video appears. Check this screenshot

I think the problem is about your video. Your video don't have the right width and height to appear correctly.

Upvotes: 0

Related Questions