Question

我在包装中有一个管视频。

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

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

/*** 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时，它没有响应。我在某些地方也有这个代码：

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

如果在视频utube-wrapper中进行响应，我怎样才能使视频响应？

我也试过跟随代码..但没有工作。

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

Answer 1

刚取出 - ＆gt;宽度730px并从utube-wrapper

向左浮动

Answer 2

一种可能的解决方案：

// CSS＆amp; 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>

结果可以在笔Responsive Iframe - Base Code中看到。

标记和CSS及其背后的基本原理取自How to Make Responsive Iframes — it’s easy!和Scaling iframes for responsive design CSS-only。

一个重点是从<iframe>标记中删除所有样式。仅限CSS样式，溢出滚动和溢出除外，它们在<div>围绕<iframe>包装器内嵌样式。另一点是设置宽度和高度，在{.1}}包装.responsive-wrapper周围设置 max-width 和 max-height 。

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

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

如何使你管视频响应？

2 个答案: