目 录CONTENT

文章目录

[html] 网页嵌入b站链接的方式

TenTh0usand
2024-04-17 / 0 评论 / 0 点赞 / 146 阅读 / 0 字
温馨提示:
本文最后更新于2024-04-17,若内容或图片失效,请留言反馈。 部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

太长不看

  1. 复制代码
  2. 修改链接
    • 链接前加入https以在obsidian中直接预览
    • 加入https会导致页面侧边栏失效(在发布平台如halo)
<iframe src="<链接>" allowfullscreen="allowfullscreen" width="100%" height="500" scrolling="no" frameborder="0" sandbox="allow-top-navigation allow-same-origin allow-forms allow-scripts"></iframe>

效果

第一次尝试 来自 B站

1 首先点击复制嵌入代码

<iframe src="//player.bilibili.com/player.html?aid=81502772&;amp;cid=139471736&amp;page=1"scrolling=”no” border=”0″ frameborder=”no” framespacing=”0″ allowfullscreen=”true”> </iframe>

2 再加上【以下内容】到代码内,这里调整的是播放界面在网站中显示的大小,可以更改高度和宽度。

style=”width: 100%; height: 500px; max-width: 100%;align:center; padding:20px 0;

3 结果

<iframe src="//player.bilibili.com/player.html?aid=81502772&;amp;cid=139471736&amp;page=1" scrolling=”no” border=”0″ frameborder=”no” framespacing=”0″ allowfullscreen=”true” style=”width: 100%; height: 500px; max-width: 100%;align:center; padding:20px 0;”> </iframe> 

自己尝试一下!

style=”width: 100%; height: 500px; max-width: 100%;align:center; padding:20px 0;”

第二次尝试 来源 腾讯云

前言

【以下内容为转载】
很多小伙伴想把B站的视频嵌入到自己的博客或者网站中,但直接使用官方视频下面的嵌入代码,网站用户就看不了高清、发不了弹幕,并且视频排版也很不美观。然后用户点击播放器里各种连接被引入源站,你相当于是无偿给他打广告的。

这里就教大家如何嵌入高质量的B站视频代码

代码

首先上代码

<iframe src="//player.bilibili.com/player.html?aid=557196521&bvid=BV1Se4y1f7Rs&cid=808139146&p=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
<iframe src="//player.bilibili.com/player.html?aid=557196521&bvid=BV1Se4y1f7Rs&cid=808139146&page=1&high_quality=1&danmaku=0" allowfullscreen="allowfullscreen" width="100%" height="500" scrolling="no" frameborder="0" sandbox="allow-top-navigation allow-same-origin allow-forms allow-scripts"></iframe>

可行

<iframe src="//player.bilibili.com/player.html?aid=557196521&bvid=BV1Se4y1f7Rs&cid=808139146&high_quality=1&danmaku=0" allowfullscreen="allowfullscreen" width="100%" height="500" scrolling="no" frameborder="0" sandbox="allow-top-navigation allow-same-origin allow-forms allow-scripts"></iframe>
  1. 修改后代码复制过来
  2. 复制网页代码 替换部分代码 原代码的 “aid”(含) 到 “&” (前) 替换复制代码的 “aid” 到 ‘’& 区间

官方代码:

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

复制

修改后:

<iframe src="//player.bilibili.com/player.html?aid=375588815&bvid=BV1so4y1m7U5&cid=339262048&page=1&high_quality=1&danmaku=0" allowfullscreen="allowfullscreen" width="100%" height="500" scrolling="no" frameborder="0" sandbox="allow-top-navigation allow-same-origin allow-forms allow-scripts"></iframe>

复制

代码讲解

BILIBILI 地址PC端参数
    &high_quality=1   (1=最高画质 0=最低画质)
    &danmaku=0   (1=打开弹幕 0=关闭弹幕)
iframe 参数
    allowfullscreen="allowfullscreen" #移动端全屏
    sandbox="allow-top-navigation allow-same-origin allow-forms allow-scripts" #禁止弹出网页

复制

属性 描述
frameborder 10 规定是否显示框架周围的边框。
height pixels% 规定 iframe 的高度。
longdesc URL 规定一个页面,该页面包含了有关 iframe 的较长描述。
marginheight pixels 定义 iframe 的顶部和底部的边距。
marginwidth pixels 定义 iframe 的左侧和右侧的边距。
name frame_name 规定 iframe 的名称。
sandbox “allow-forms allow-same-origin allow-scripts allow-top-navigation” 启用一系列对
scrolling yes/no/auto 规定是否在 iframe 中显示滚动条。
seamless seamless 规定
src URL 规定在 iframe 中显示的文档的 URL。
srcdoc HTML_code 规定在
width pixels% 定义 iframe 的宽度。
0

评论区