CODEWITHSUNDEEP
htmlcssiframebootstrap-4
PapT
PapT

Reputation: 623

How do I make this embedded video 100% wide?

I have the code below with one row and two columns. In the first column I would like to display an embedded video from Vimeo. What I want is that the video would fill out its column without having any paddings. The two columns should have no space between them either.

.video iframe {
    width: 100%;
}
.lesson-pager {
    background-color: #00000081;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
                <div class="row video-row no-gutters">
                    <div class="col-lg-8">
                        <div class="video">
                            <iframe src="https://player.vimeo.com/video/42582007" width="640" height="360" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
                        </div>
                    </div>
                    <div class="col-lg-4 lesson-pager">
                        <div class="lesson-title">
                            <h4>Lesson title</h4>
                        </div>
                    </div>
                </div>
            </div>

Upvotes: 0

Views: 155

Answers (2)

yinsweet
yinsweet

Reputation: 2851

Since you are using bootstrap-4, you may use the embed utility to make it 100% wide.

.video iframe {
  width: 100%;
}

.lesson-pager {
  background-color: #00000081;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row video-row no-gutters">
    <div class="col-lg-8">
      <div class="video embed-responsive embed-responsive-16by9">
        <iframe class="embed-responsive-item" src="https://player.vimeo.com/video/42582007" width="640" height="360" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
      </div>
    </div>
    <div class="col-lg-4 lesson-pager">
      <div class="lesson-title">
        <h4>Lesson title</h4>
      </div>
    </div>
  </div>
</div>

Upvotes: 1

Rupinderpal Thind
Rupinderpal Thind

Reputation: 537

You can use this css trick to make it covering full area

.lesson-pager {
    background-color: #00000081;
}
.video{
  position: relative;
    padding-top: 56.25%;
}
.video iframe{
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
		<div class="row video-row no-gutters">
		    <div class="col-lg-8">
		        <div class="video">
		            <iframe src="https://player.vimeo.com/video/42582007" width="640" height="360" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
		        </div>
		    </div>
		    <div class="col-lg-4 lesson-pager">
		        <div class="lesson-title">
		            <h4>Lesson title</h4>
		        </div>
		    </div>
		</div>
</div>

Upvotes: 0

Related Questions