iframe嵌入视频自适应

解决用iframe标签嵌入视频时,视频与页面不协调的问题。

  1. 首先在site\themes\next\source\css\_custom.stl创建一个CSS类

    1
    2
    3
    <div class="aspect-ratio">
    <iframe src="//player.bilibili.com/player.html?aid=24287094&cid=40734416&page=1" scrolling="yes" border="0" frameborder="no" framespacing="1" allowfullscreen="true"></iframe>
    </div>
  2. 其次,用一个aspect-ratio类的块内容把iframe包起来,再写到md文件中,如下

    1
    2
    3
    <div class="aspect-ratio">
    <iframe src="//player.bilibili.com/player.html?aid=24287094&cid=40734416&page=1" scrolling="yes" border="0" frameborder="no" framespacing="1" allowfullscreen="true"></iframe>
    </div>
  3. 最后,效果如下

  • 版权声明: 本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!