WordPress免插件引用外部视频_iframe自适应16:9代码(B站)

老白博客@老白在网页中嵌入视频时,为了保证播放器的显示效果,我们通常会使用 iframe 元素来引用播放器。而且我们希望播放器的宽高比为16:9,以适配各种不同的屏幕分辨率。本文以B站视频为例,给大家分享一下“WordPress免插件引用外部视频_iframe自适应16:9代码”

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

src=后面加视频链接即可,如B站视频链接获取方式为:

WordPress免插件引用外部视频_iframe自适应16:9代码(B站)

原代码

<iframe src="//player.bilibili.com/player.html?aid=932721193&bvid=BV1UM4y137yF&cid=397954183&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

视频链接就是下面这段

//player.bilibili.com/player.html?aid=932721193&bvid=BV1UM4y137yF&cid=397954183&page=1