让bilibili、优酷分享视频自适应文章页面宽度

bilibili、优酷和爱奇艺这类视频网站分享视频页面通常使用iframe标签的形式。发现如果将其直接嵌入文章页面会有错位的情况,就像下面这样:

bilibili经典的“去吐槽”已经不能完全显示,而文章的左侧又多出一部分空白空间。非常影响观感。

添加CSS样式

可以通过为iframe标签定义一个class选择器,给它添加上CSS样式,调整所嵌入的视频显示的位置。

<div class="share">
    <iframe height=498 width=510 src='https://player.youku.com/embed/XNTc2NDY3NDI0' frameborder=0 'allowfullscreen'></iframe>
</div>

share类的定义:

.share{
    position: relative;
    overflow: hidden;
    padding-top: 56.25%;
}

分享的视频嵌入居中正常显示了

通过测试以上方法对优酷、爱奇艺都是有效的。

转载需保留链接来源:软件玩家 » 让bilibili、优酷分享视频自适应文章页面宽度

赞 (0) 打赏

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

赏作者一杯咖啡

微信扫一扫打赏