关于土豆哥
一只文艺型码农
【前端笔记】使用iframe嵌入等比缩放的哔哩哔哩视频
【前端笔记】使用iframe嵌入等比缩放的哔哩哔哩视频

之前在《【考前安利】助梦南开》这篇文章里,土豆哥说要告诉大家怎么样嵌入来自哔哩哔哩的iframe视频,今天拖了几天的文章总算开始写了(๑•̀ㅂ•́)و✧

今天算是给【前端笔记】系列开个头吧,作为一名(伪)前端工程师,土豆哥可能时不时会在马铃薯田地放一些关于前端的技巧和学习心得<( ̄︶ ̄)>欢迎感兴趣的小朋友们来关注哦ヽ(✿゚▽゚)ノ


这篇笔记主要讲的是如何在网页中嵌入来自哔哩哔哩的视频。

目前国内大多数视频网站都提供了分享的途径,对于嵌入到其他网页的分享大多采用iframe。iframe是HTML的一个标签,它支持在HTML页面中以框架的形式显示来自其他网页的内容。通过使用iframe,你可以把来自视频网站的播放器嵌入到你的网页。

哔哩哔哩当然也提供了用于嵌入到其他网页的iframe代码。但是,不知道为什么(可能因为哔哩哔哩的程序员和我一样懒吧╮(╯▽╰)╭),哔哩哔哩的iframe播放器是没有等比适应的o(≧A≦)o简单来说,就会造成下面的效果——

嵌入的视频宽度实现了自适应,但是高度没有实现等比缩放,因此看起来很……扁(╯-_-)╯╧╧


首先,我们需要定义一个CSS类。

.aspect-ratio {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 75%;
}

.aspect-ratio iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}

在aspect-ratio类中,宽度被设为100%,高度被设为0,padding-bottom属性(外部下边距)被设为75%。因为当padding-bottom的值为百分比时,百分比计算的基准为父元素的宽,而aspect-ratio类的宽度为父元素宽度的100%,所以它的外部下边距也就占宽度的75%。这样,aspect-ratio类的实际宽高比(包含边距的宽高比)就变为了四比三。另外,aspect-ration类的position必须定义为relative,保证它的定位是相对于原始位置定义。

在aspect-ratio类下的iframe元素宽高都被设为100%。因为当元素的position属性设为absolute且width和height属性的值为百分比时,百分比计算基准分别为父元素包含外边距的款和高。所以,此时iframe元素会沾满整个aspect-ratio类的父元素,也就是形成四比三的宽高比。

定义完CSS之后,再来写HTML内容,把哔哩哔哩提供的iframe框架嵌入页面。这里,先获取哔哩哔哩提供的iframe代码:

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

然后,用一个aspect-ratio类的块内容把iframe包起来——

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

这样一来,就可以实现等比缩放的自适应iframe框架啦~

手机端的显示也是正常的——

这种方法不只可以用于嵌入哔哩哔哩视频,对于其它的iframe框架都是可以的哦(~ ̄▽ ̄)~

赞赏
除特殊说明外,本站文章均为作者原创,采用 CC BY-NC-SA 3.0 Unported 协议进行许可。
首页      码农      折腾      【前端笔记】使用iframe嵌入等比缩放的哔哩哔哩视频

发表评论

textsms
account_circle
email

CAPTCHAis initialing...

【前端笔记】使用iframe嵌入等比缩放的哔哩哔哩视频
之前在《【考前安利】助梦南开》这篇文章里,土豆哥说要告诉大家怎么样嵌入来自哔哩哔哩的iframe视频,今天拖了几天的文章总算开始写了(๑•̀ㅂ•́)و✧ 今天算是给【前端笔记】系列开个头吧…
扫描二维码继续阅读
2018-06-11