B站视频修改自适应测试

B站视频自适应了~

本博客用什么VPS?创作不易,欢迎请咕咕喝杯咖啡☕☕☕

原来

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

自适应

<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=328334002&bvid=BV1tA411q7xi&cid=193834244&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe>
</div>

自适应不跳转

sandbox=”allow-top-navigation allow-same-origin allow-forms allow-scripts”
<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=328334002&bvid=BV1tA411q7xi&cid=193834244&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" sandbox="allow-top-navigation allow-same-origin allow-forms allow-scripts"></iframe>
</div>

在网页上, 用户选择清晰度, 或者点击视频上面的一些图标, 会跳转到B站. 这个可通过设置 iframe 的 sandbox 属性去禁止

sandbox=”allow-top-navigation allow-same-origin allow-forms allow-scripts”

---------------
如何觉得文章内容不错,欢迎点击一下广告,支持一下咕咕😍😍😍

原创文章,作者:Roy,如若转载,请注明出处:https://iwanlab.com/bilibili-video-test/

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
Roy的头像Roy
上一篇 2023年6月15日 下午7:24
下一篇 2023年6月15日 下午7:24
   

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

持有Olink法兰克福的服务器的小伙伴,请注意查收邮件( 由于德国数据中心持续的网络问题,经过慎重考虑,Olink决定关闭德国区域的所有业务),及时回复工单选择退款或者迁移服务器至圣何塞。