最近需要在博客种插入哔哩哔哩的视频,发现直接插入的链接视频在电脑中会显示的很小。不方便电脑端查看视屏。

适应B站视频

适应B站视频


复制嵌如代码后,无法适配,效果如下:

这里有两种解决方案:
第一种能够同时适配手机端和电脑端,效果比较好,但是每次要处理一下链接。
第二种方案将iframe的样式在主题CSS种写好,每次直接复制代码就可以,但高度固定手机显示过高

第一种方案

方案代码内容如下:

<div style="position: relative; padding: 30% 45%;">
<iframe style="position: absolute; width: 100%; height: 100%; left: 0; top: 0;" src="//player.bilibili.com/player.html?aid=841279664&bvid=BV1w54y1q7uf&cid=212084845&page=1&as_wide=1&high_quality=1&danmaku=0" frameborder="no" scrolling="no"></iframe>
</div>

每次需要替换其中“src=”部分的地址,上面代码嵌入后实现的效果如下:

第二种方案

第二种方案,直接在主题的CSS中写入iframe的样式()。

插入CSS样式

插入CSS样式


写入代码如下(图片中代码后有改动,以下方为准):

iframe{width:100%;height:400px;max-width:100%;}

代码嵌入CSS之后实现的效果如下: