How to make this you tube video responsive?

问题:

I have an you tube video in a wrapper.

<div class="featured_video_plus">
    <iframe width="730" height="435" frameborder="0" id="fvpyt234171" type="text/html" src="youtubesourcefile"></iframe>
</div>

When I put following CSS code, this you tube video is responsive.

/*** You tube video ***/
.featured_video_plus { position: relative; padding-bottom: 56.25%; /* 16:9 */ padding-top: 25px; height: 0; width: auto;}
.featured_video_plus iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

But It is NOT responsive when the wrapper is in another DIV. I have this code also in some places:

<div class="utube-wrapper" style="width: 730px; margin: 0px 33px 32px 0px; float: left;">
    <!-- Featured Video Plus v1.9-->
    <div class="featured_video_plus">
        <iframe width="730" height="435" frameborder="0" id="fvpyt233458" type="text/html" src="youtubesourcefile"></iframe>
    </div>
</div>

How can I make this you tube video responsive when it's is in the div utube-wrapper also?

I've tried following code also.. but not working.

/*** You tube video ***/
.featured_video_plus { position: relative; padding-bottom: 56.25%; /* 16:9 */ padding-top: 25px; height: 0; width: auto;}
.featured_video_plus iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.utube-wrapper { position: relative; padding-bottom: 56.25%; /* 16:9 */ padding-top: 25px; height: 0; width: auto;}
.utube-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

回答1:

Just take out -> width 730px and float left from the utube-wrapper

回答2:

One possible solution:

// CSS & HTML

.center-block-horiz {
  margin-left: auto;
  margin-right: auto;
}
.border-5px-inset-4f4f4f {
  border: 5px inset #4f4f4f;
}
.set-padding {
  padding: 30px;
}

.responsive-wrapper {
  position: relative;
  height: 0;    /* gets height from padding-bottom */
  /* put following styles (necessary for overflow and scrolling handling on mobile devices) inline in .responsive-wrapper around iframe   because not stable in CSS:
    -webkit-overflow-scrolling: touch; overflow: auto; */
}

.responsive-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#Iframe-Maison-Willem-Tell {
  max-width: 80%;
  max-height: 300px;
  overflow: hidden;
}

/* padding-bottom = h/w as % -- set aspect ratio */
.responsive-wrapper-wxh-600x480 {
  padding-bottom: 80%;
}  


<!-- embed responsive iframe --> 
<div class="set-padding border-5px-inset-4f4f4f">
<div id="Iframe-Maison-Willem-Tell" 
     class="border-5px-inset-4f4f4f center-block-horiz">
  <div class="responsive-wrapper 
     responsive-wrapper-wxh-600x480"
     style="-webkit-overflow-scrolling: touch; overflow: auto;">
<!-- style overflow and overflow-scrolling inline because not
     stable in CSS -->
    <iframe src="http://maisonwillemtell.be">  
      <p style="font-size: 110%;"><em><strong>IFRAME: </strong>  
There is iframe content being displayed  
 here but your browser version does not support iframes. </em>  
Please update your browser to its most recent version  
 and try again.</p>  
    </iframe>
  </div>
</div>
</div>

The result can be seen in the Pen Responsive Iframe - Base Code.

The markup and CSS and the rationale behind them are taken from How to Make Responsive Iframes — it’s easy! and from Scaling iframes for responsive design CSS-only.

One salient point is to remove all styling from the <iframe> tag. Style with CSS only, with the exception of overflow-scrolling and overflow which are styled inline in the <div> wrapper around the <iframe>. Another point is to set width and height be setting max-width and max-height in the <div> wrapper around .responsive-wrapper.

The outer most <div> is not necessary; it's just there to show the effects of padding and border.

To position the iframe left you might use flex box instead of float.