iframe嵌入视频自适应

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

首先在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>

其次，用一个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>

最后，效果如下