HTML – 如何实现流体宽度视频？

概述我尝试使用流体宽度视频的示例,它适用于视频,但其他类型的内容(纯文本注释)不应该有填充,现在他们得到填充导致每个评论不是一个大的差距没有视频.你能告诉我如何修复布局,以便所有元素都流畅且反应灵敏吗？ .abstract{}.abstract-inner { position: relative; padding-bottom: 56.25%; /* 16:9 */ 我尝试使用流体宽度视频的示例,它适用于视频,但其他类型的内容(纯文本注释)不应该有填充,现在他们得到填充导致每个评论不是一个大的差距没有视频.你能告诉我如何修复布局,以便所有元素都流畅且反应灵敏吗？

.abstract{}.abstract-inner {    position: relative;    padding-bottom: 56.25%; /* 16:9 */    padding-top: 25px;    height: 0;}.abstract-inner iframe {    position: absolute;    top: 0;    left: 0;    wIDth: 100%;    height: 100%;}

HTML

<div >        <div >          <div >              <iframe wIDth="512" height="288" src="https://www.youtube.com/embed/r9yH-EmnGX4?feature=oembed" frameborder="0" allowfullscreen="allowfullscreen"></iframe>          </div>          </div>      </div>

以上只是一个片段,但是如果有帮助的话我做了fiddle.也许你知道我该怎么做才能使视频具有流畅的响应能力并且正确放置文本？

如果我只使用这个CSS,那么一切都是鳍,除了视频的高度太小：

.abstract{}.abstract-inner {}.abstract-inner iframe{   min-wIDth: 100% !important;   max-wIDth: 100% !important;   min-height: 100% !important;   max-height:100% !important;}

如果我使用CSS视口单元,那么页面看起来就在小提琴中,但与我的其他代码相结合,然后视频被炸得比页面大.

在this fiddle中,当页面调整大小以适合左侧的菜单时,使用CSS视口再现问题.

解决方法 在这种情况下我会使用 CSS viewport units.

代码也变得简单得多. (您可能还会发现某些包装元素不再是必需的)

iframe {    wIDth: 100%;     height: 56.25vw; /* 16:9 ... 56.25vw means 56.25% of the vIEwport wIDth*/}

而已.

Updated fiddle(调整大小以验证iframe保持宽高比)

注意：

如果您只希望iframe占据视口宽度的某个％(例如80％) – 仍然可以在iframe上保持正确的宽高比时完成此 *** 作.

FIDDLE(调整视口宽度)

iframe {  wIDth: 100%;  height: 56.25vw;  /* 16:9 ... 56.25vw means 56.25% of the vIEwport wIDth*/}asIDe {  wIDth: 20vw;  height: 100vh;  background: aqua;  display: none;}@media screen and (min-wIDth: 900px) {  asIDe {    display: table-cell;  }  iframe {    wIDth: 80vw;    height: 45vw;    /* 9/16 * 80 = 45  */  }  .content {    display: table-cell;    vertical-align: top;  }  .wpr {    display: table;  }}

<div >  <asIDe>blabla</asIDe>  <div >    <iframe src="https://www.youtube.com/embed/r9yH-EmnGX4?feature=oembed" frameborder="0" allowfullscreen="allowfullscreen"></iframe>    <p>content here</p>    <p>content here</p>    <p>content here</p>  </div></div>

总结

以上是内存溢出为你收集整理的HTML – 如何实现流体宽度视频？全部内容，希望文章能够帮你解决HTML – 如何实现流体宽度视频？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。