在博客中添加 B 站视频

李鹏坤 / 2020-08-08


今天在逛博客时看到有篇博客把 B 站的视频添加到了文章里,非常新奇。

原来是 B 站提供了使用 iframe 代码片段分享视频的功能。于是我兴高采烈地,打算把我上学时为了装 X 而做的两个视频放上来。可是一测试,蒙了,怎么和人家的不一样!

人家的效果截图

我的测试截图

直接使用代码片段,视频非常小而且除了播放按钮,连全屏功能都没有。查阅了 iframe 的文档 ,iframe 的高度默认是 150,宽度默认 300,然后我看了一下那篇博客的 iframe 是添加了一个 height="520" 的。我加了之后效果是一致了,可是我觉得还可以更好看。

于是我在 iframe 外层添加了一个 P 标签,进行隐藏 iframe 上下的多余内容,并在屏幕宽度小于 545px 时对视频的高度进行了动态处理。

<p class="billibili">
  <iframe class="billibili" src="//player.bilibili.com/player.html?aid=43520227&bvid=BV1Tb41127wF&cid=76266064&page=1"
  scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
</p>
 p.billibili {
   overflow: hidden;
 }

 iframe.billibili {
   width: 100%;
   height: 480px;
   margin-top: -75px;
   margin-bottom: -38px;
 }

 @media only screen and (max-width:545px) {
   iframe.billibili {
     --width: calc(100vw - 50px);
     height: calc(var(--width)/1.75);
     margin: 0;
   }
 }

效果如下

上面这个是大二时,我和同学一起做的一个“APP 原型设计展示视频”,是介绍我们“APP 交互设计”课设计的 APP 的,结课时配套有 PPT 在班里展示的,单单这么看可能会看得糊里糊涂的,不过嘛,就看看好了,不必深究内容。

下面这个是我实习时,工作汇报用的视频,当然啦,视频里的内容在现在看来真的是“too young,too simple”了,而且视频里的链接也是失效了。不过项目代码倒是有,欢迎到我的 Github 代码库寻找。

感谢观看!

EOF