CODEWITHSUNDEEP
htmlcssmaterialize
turtlefish12
turtlefish12

Reputation: 261

How to use grid structure to embed videos?

I'm trying to embed three videos into a certain structure. There will be a left column with one video and a right column with two smaller sized videos like in this image: https://i.sstatic.net/W9jtd.png

I've tried making a left column and right column but there are a few issues: My left video is much smaller than I want it to be and not taking up the whole column. The second issue is that the right videos are much longer than I want them to be. 

.column {
  border:   2px solid black;
  height: auto;
  position: relative;
}

.column iframe {
  width: 85%;
  height: auto;
  float: center;
}

.column .left {
  float: right;
  width: 60%;
}

.column .right {
  float: left;
  width: 40%;
}

.row:after {
  content: "";
  display: table;
  clear: both;
} 
   <div class="videos">
      <div class="row">
        <div class="column left">
             <iframe 
           src = "https://www.youtube.com/embed/Q8TXgCzxEnw?rel=0"
           frameborder = "0"  allowfullscreen></iframe>
        </div>
        <div class="column right">
           <iframe 
           src = "https://www.youtube.com/embed/Q8TXgCzxEnw?rel=0"
           frameborder = "0" allowfullscreen></iframe>
            <iframe 
           src = "https://www.youtube.com/embed/Q8TXgCzxEnw?rel=0"
           frameborder = "0" allowfullscreen></iframe>
        </div>
      </div>
    </div>

My current results are as described before. How can this be fixed?

Upvotes: 0

Views: 4301

Answers (2)

Becky
Becky

Reputation: 5585

You can use grid to easily achieve this.

HTML

<section class="video-container">
  <div class="video-large">
    <iframe></iframe> <!-- your video -->
  </div>
  <div class="video-small-top">
    <iframe></iframe> <!-- your video -->
  </div>
  <div class="video-small-bottom">
    <iframe></iframe> <!-- your video -->
  </div>
</section>

css

.video-container {
  display: grid;
  grid-template-columns: 66.6% 33.3%;
  grid-auto-flow: column;
}
.video-large {
  grid-column: 1;
  grid-row: 1 / 3;
}
.video-container iframe{ /*change according to your need*/
  min-width: 100%; 
  min-height: 100%;
  width: auto;
  height: auto;
}

That's it! Here's an Example

Upvotes: 1

Hybrid
Hybrid

Reputation: 7049

You may be better off suited using flexbox:

.wrapper {
  display: flex;
}

.wrapper>.left {
  flex: 1 0 55%;
}

.wrapper>.right {
  flex: 0 0 45%;
  display: flex;
  flex-direction: column;
}

.wrapper>.right>.vid-wrapper {
  display: flex;
}

.wrapper>.right>.vid-wrapper>.video {
  flex: 1 0 45%;
}

.wrapper>.right>.vid-wrapper>.video>iframe {
  max-width: 100%;
}

.wrapper>.right>.vid-wrapper>.info {
  flex: 0 0 55%;
}
<div class="wrapper">
  <div class="left">Main Video</div>
  <div class="right">
    <div class="vid-wrapper">
      <div class="video">
        <iframe src="https://www.youtube.com/embed/Q8TXgCzxEnw?rel=0" frameborder="0" allowfullscreen></iframe>
      </div>
      <div class="info">Description</div>
    </div>
    <div class="vid-wrapper">
      <div class="video">
        <iframe src="https://www.youtube.com/embed/Q8TXgCzxEnw?rel=0" frameborder="0" allowfullscreen></iframe>
      </div>
      <div class="info">Description</div>
    </div>
  </div>
</div>

Upvotes: 0

Related Questions