Don't want iframe to take up 100% width after 759px

Question

I have a problem with youtube iframe videos. I want the iframe to take up the 100% width of the page and maintain aspect ratio on mobile devices. I do not want the video to get bigger than its 560 width or 315 height. I then want the 2 videos to be displayed inline-block on a tablet and for the desktop. I want the iframes side by side on a tablet and desktop. I can't seem to figure this out. I have exhaustively searched this and can't find an answer that works. Here is my code.

HTML

<div class="video_responsive">
 <div class="video-container">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/9_zGXEmNKPo" frameborder="0" allowfullscreen></iframe>
 </div>
 <div class="video-container">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/zEI8CT7cElQ" frameborder="0" allowfullscreen></iframe>
 </div>
</div>

CSS

.video_responsive{
  padding-left: 1em;
  padding-right: 1em;
}
.video-container{
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 35px;
  margin-top: 20px;
  height: 0;
  overflow: hidden;
}
.video-container iframe{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

Any help would be appreciated. I am doing this for a class. Professor has no idea how to fix this problem. Thanks

Answer 1

Update 2

OP mentioned an interest in tables. Although they can make a layout simple, it's not meant for layout, they're meant to represent data. Fortunately, there's are several display values that allow an element to behave like a table. On both demos, when in desktop mode, the posters (images displayed when video is idle) overlap and are distorted, but the video isn't.

The most important ones are:

• table element will behave like <table>
• table-row element will behave like <tr>
• table-cell element will behave like <td>

Here's an article with tips on how to use display: table

This Plunker is using display: table/table-cell

---

Update 1

The code editor on this site isn't good for complex CSS so I moved the demo over to Plunker

Summary

• 2 major properties in use are:
  • media query
  • flexbox
• Mobile mode 758px or less in width for viewport
  • flexbox layout is stacked (flex-flow: column nowrap)
• Desktop mode 759px or more in width for viewport
  • media query triggers at 759px or more
  • flex-flow is now row nowrap

---

Use media query:

 @media only screen and (min-width: 759px) {
   .video_responsive {
     display: table;
     }
  .video-cpntainer {
    display: table-cell;
    max-width: 45vw;
 }

.video_responsive {
  padding-left: 1em;
  padding-right: 1em;
}
.video-container {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 35px;
  margin-top: 20px;
  height: 0;
  overflow: hidden;
}
.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
  @media only screen and (min-width: 759px) {
   .video_responsive {
 flex-flow: row nowrap;
 }
.video-container {
		min-width: 380px;
		max-width: 48vw;
		min-height: 214px;
		max-height: 27vh;
	}
 }

<div class="video_responsive">
  <div class="video-container">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/9_zGXEmNKPo" frameborder="0" allowfullscreen></iframe>
  </div>
  <div class="video-container">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/zEI8CT7cElQ" frameborder="0" allowfullscreen></iframe>
  </div>
</div>

Answer 2

In your CSS set max-width: 759px; for your iframe.