CODEWITHSUNDEEP
htmlcss
Dannie Della
Dannie Della

Reputation: 11

HTML5 and CSS3 - How to Make Videos Side by Side and responsive

I am trying to make a 3x3 layout style of videos on my website. I have them responsive but I can't figure out how the middle can be centered in between the left and right video and how to put space in between them. Also, I want some margin on the right and left so they don't hit the border of the webpage. Here is the HTML and CSS: HTML:

<div class="video-layout">
<div class="video">
<div id="vid-left">
<iframe src="https://www.youtube.com/embed/qdIdPBIF6MU" frameborder="0" allowfullscreen></iframe>
</div>
<div id="vid-mid">
<iframe src="https://www.youtube.com/embed/qdIdPBIF6MU" frameborder="0" allowfullscreen></iframe>
</div>
<div id="vid-right">
<iframe src="https://www.youtube.com/embed/qdIdPBIF6MU" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>

CSS:

   .video {
    position: relative;
    padding-bottom: 56.25%;
}
.video iframe {
    position: absolute;
    width: 100%;
    height: 100%;
}
.video-layout {
    max-width: 500px;
    border: 1px solid green;
}
#vid-left {
    margin-left: 25px;
    float: left;
}
#vid-mid {

}
#vid-right {
    float: right;
}

Upvotes: 1

Views: 4247

Answers (3)

Y AND A Co
Y AND A Co

Reputation: 1

With this embed code, all your worries will be solved.

If you have uploaded videos to YouTube or other sites. First, embed them and copy the code they provided. Then place the embed code of your first video instad the line that says "Place your video code here" in my code.

Then place the code for your second video next to the same line in the other section of my code.

Putting the URL of the video directly will not work.

Ones Your video code are added to my code.

Copy and paste everything into a section of your site where you can embed the codes.

That will place your videos side by side. Dont forget to adjust the video sizes in my code to fit the size of videod you want.

<iframe width="128" height="72" place your embed video code here

<iframe width="128" height="72" place your embed video code here

Upvotes: 0

zer00ne
zer00ne

Reputation: 43870

  • Used OP's classic responsive video rules then scaled everything roughly at 30%.
  • Used flexbox to keep an equal amount of space between each video and the screen's edges.
  • Applied the defaults I use normally.

It's very responsive, shrink it, enlarge it, call it bad names it just keeps chugging along. All it needs is a simple media query to make it stack vertically when displayed on a phone/tablet portrait oriented....

.... Ok I added a media query for mobile portrait orientation. When testing it, go to dev tools and use the phone emulator, or better yet look at this in a phone ;-)

Snippet

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>35761650</title>
  <style>
    html {
      box-sizing: border-box;
      font: 500 16px/1.428'Raleway';
      height: 100vh;
      width: 100vw;
    }
    *,
    *:before,
    *:after {
      box-sizing: inherit;
      margin: 0;
      padding: 0;
    }
    body {
      position: relative;
      font-size: 1rem;
      line-height: 1;
      height: 100%;
      width: 100%;
      overflow-x: hidden;
      overflow-y: scroll;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      background: black;
      color: yellow;
    }
    .video {
      position: relative;
      padding-bottom: 56.25%;
      height: 16vh;
      width: 30vw;
    }
    .video iframe {
      position: absolute;
      width: 100%;
      height: 56.25%;
      left: 0;
      right: 0;
      bottom: 0;
      top: 0;
    }
    .videoFrame {
      position: relative;
      display: flex;
      flex-flow: row nowrap;
      width: 100vw;
      border: 1px solid green;
      height: 100vh;
      overflow-y: hidden;
      overflow-x: scroll;
      justify-content: space-around;
      margin: 0 auto;
      padding: 12vh 0;
    }
    @media screen and (max-device-width: 768px) {
      .videoFrame {
        flex-flow: column nowrap;
        overflow-y: scroll;
        overflow-x: hidden;
        align-items: center;
        margin: 0 auto;
        padding: 0;
      }
      .video {
        position: relative;
        padding-bottom: 56.25%;
        height: 0;
        width: 100vw;
      }
      .video iframe {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
      }
    }
  </style>
</head>

<body>

  <div class="videoFrame">
    <div class="video">
      <iframe src="https://www.youtube.com/embed/qdIdPBIF6MU" frameborder="0" allowfullscreen></iframe>
    </div>
    <div class="video">
      <iframe src="https://www.youtube.com/embed/qdIdPBIF6MU" frameborder="0" allowfullscreen></iframe>
    </div>
    <div class="video">
      <iframe src="https://www.youtube.com/embed/qdIdPBIF6MU" frameborder="0" allowfullscreen></iframe>
    </div>
  </div>
</body>

</html>

Upvotes: 1

Cave Johnson
Cave Johnson

Reputation: 6778

Here is my attempt at this: https://jsfiddle.net/w1mmLz4h/

CSS:

.video {
    position: relative;
    padding-bottom: 56.25%;
}
.video iframe {
    width: 100%;
    height: 100%;
}
.video-layout {
    max-width: 500px;
    border: 1px solid green;
}
#vid-left {
    float: left;
    padding:5px;
    width:33%;
    box-sizing:border-box;
}
#vid-mid {
    float: left;
    padding:5px;
    width:33%;
    box-sizing:border-box;
}
#vid-right {
    float: left;
    padding:5px;
    width:33%;
    box-sizing:border-box;
}

HTML:

<div class="video-layout">
<div class="video">
<div id="vid-left">
<iframe src="https://www.youtube.com/embed/qdIdPBIF6MU" frameborder="0" allowfullscreen></iframe>
</div>
<div id="vid-mid">
<iframe src="https://www.youtube.com/embed/qdIdPBIF6MU" frameborder="0" allowfullscreen></iframe>
</div>
<div id="vid-right">
<iframe src="https://www.youtube.com/embed/qdIdPBIF6MU" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>

Upvotes: 1

Related Questions