• 注册
  • 聊天灌水 聊天灌水 关注:57 内容:2057

    iframe 引用播放器自适应16:9代码

  • 查看作者
  • 打赏作者
  • 当前位置: 七七博客 > 聊天灌水 > 正文
    • 聊天灌水
    • iframe 引用播放器自适应16:9代码

      在网页中嵌入视频时,为了保证播放器的显示效果,我们通常会使用 iframe 元素来引用播放器。而且我们希望播放器的宽高比为16:9,以适配各种不同的屏幕分辨率。当容器的宽度发生变化时,播放器的宽高比就会自动适应为16:9的比例。该代码还允许用户在播放器中全屏观看视频,提升用户体验。

      示例代码

      <!-- padding-top calculation is height / width (assuming 16:9 aspect ratio) -->
      <div style="position: relative; padding-top: 56.25%">
        <iframe
          src="https://test.com/iframe"
          style="border: none; position: absolute; top: 0; height: 100%; width: 100%"
          allowfullscreen="true"
        ></iframe>
      </div>

      请登录之后再进行评论

      登录
    • 任务系统
    • 帖子间隔 侧栏位置: