CODEWITHSUNDEEP
htmlcsstwitter-bootstrapbootstrap-4
MJ Mahdi
MJ Mahdi

Reputation: 61

Embed video in Bootstrap take up the whole width of the screen?

I'm trying to embed a Youtube video into a webpage using Bootstrap, but I want it to take up the whole width of the page.

HTML:

<iframe class="embed-responsive-item youtube" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0"></iframe>

CSS:

.youtube {
  width:100%;
}

JSFiddle

But I have two issues:

How can I fix this using Bootstrap?

Upvotes: 5

Views: 12117

Answers (4)

vonPiernik
vonPiernik

Reputation: 134

I know this looks stupid but I was inspired by inspected code on Bootstrap official web page:

.embed-responsive{
  position: relative;
  padding-top: 56.25%;
}
.youtube{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
  
}

56.25% - this is the proportion thing, ya know, 16:9 etc ;)

Upvotes: 4

WebDevBooster
WebDevBooster

Reputation: 14954

You need to add the class container-fluid instead of container.

Try this code: 

<section id="about" class="home-section text-center">
    <div class="container-fluid">
        <div class="row">
            <div class="embed-responsive embed-responsive-1by1">
                <iframe class="embed-responsive-item youtube" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0">
                </iframe>
            </div>
        </div>
    </div>
</section>

Upvotes: 0

Heinz Schilling
Heinz Schilling

Reputation: 2252

In Bootstrap v3 this construct will do a full width iframe:

<div class="embed-responsive embed-responsive-16by9">
    <iframe class="embed-responsive-item" src="https://www.youtube-nocookie.com/embed/H_CN8W_uCys?wmode=transparent&amp;rel=0&amp;showinfo=0" allowfullscreen=""></iframe>
</div>

Upvotes: 6

Andrew
Andrew

Reputation: 171

This is actually solvable with pure CSS through an understanding of aspect ratios. The code is easy enough, just replace your .youtube selector with the following code:

.embed-responsive {
  position: relative;
  width:100%;
  height: 0;
  padding-top: 56.25%;
}

.youtube{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

This sets the parent of the YouTube iframe to have a 100% width fluidly, with an aspect ratio of 16/9, by using a 0 height with a padding top of 56.25%. Then you just need to make the iframe fill that parent, which is achieved with absolute positioning and a height and width of 100%.

Upvotes: 0

Related Questions