菜单 eyoucms模板网

站长经验总结
有时网站后台发布转载文章,而文章中带有视频,这个视频通常是采用iframe方式嵌入的。如下代码:<p class="video">

如何让iframe,object,embed标签完美自适应视频宽度高度?

发布时间:2025-05-16 10:22:13
点击次数:0
复制本文链接

有时网站后台发布转载文章,而文章中带有视频,这个视频通常是采用iframe方式嵌入的。如下代码:

  1. <p class="video">
  2.   <iframe src="https://www.xxx.com" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
  3. </p>

  1. .video {
  2.   position: relative;
  3.   padding-bottom56.25%;
  4.   height0;
  5.   overflow: hidden;
  6. }
  7. .video iframe,
  8. .video object,
  9. .video embed {
  10.   position: absolute;
  11.   top0;
  12.   left0;
  13.   width100%;
  14.   height100%;
  15. }



重点就是要定义这个video,具体可以根据实际情况调整class


收藏

相关文章

加载中~