如何使你管视频响应？ [英] 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>

当我输入以下CSS代码时，你管视频会响应。

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%; }

但当包装器在另一个 DIV中时，它没有响应。
我在某些地方也有这个代码：

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>

如果在div 中，我怎么能让你管视频utube-wrapper 还吗？

我也尝试过以下代码..但不能正常工作。

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%; }

推荐答案

一种可能的解决方案：

// CSS& HTML

// 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>

结果可以在Pen 响应式iframe - 基本代码。

标记和CSS及其背后的基本原理取自如何制作响应式iframe - 这很简单！并且来自为响应式设计缩放iframe仅限CSS。

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.

一个重点是从< iframe> 标记中删除所有样式。只有CSS的样式，溢出滚动和溢出除外，这些内容在< div> 内嵌样式内嵌< iframe> 。另一点是设置宽度和高度在< div> 中设置 max-width 和 max-height 包装.responsive-wrapper。

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.

最外面的< div> 不是必需的;它只是显示填充和边框的效果。

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

要将iframe放置在左边，你可以使用弹性框而不是浮动。

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

这篇关于如何使你管视频响应？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！