iframe嵌入BiliBili视频方法B站视频外链

❤ 提示:本文共2059个字,预计阅读时间6分钟

资讯线报 4周前 小蟹切换:繁體
2,040 0

iframe嵌入BiliBili视频方法B站视频外链

  1. <iframe src=“//player.bilibili.com/player.html?aid=60016166&cid=104514776&page=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. BILIBILI 地址PC端参数
  2. &danmaku=0 (1=打开弹幕 0=关闭弹幕)
  3. iframe 参数
  4. allowfullscreen=“allowfullscreen” #移动端全屏
  5. sandbox=“allow-top-navigation allow-same-origin allow-forms allow-scripts” #禁止弹出网页
属性 描述
align leftrighttopmiddlebottom 不赞成使用。请使用样式代替。规定如何根据周围的元素来对齐此框架。
frameborder 10 规定是否显示框架周围的边框。
height pixels% 规定 iframe 的高度。
longdesc URL 规定一个页面,该页面包含了有关 iframe 的较长描述。
marginheight pixels 定义 iframe 的顶部和底部的边距。
marginwidth pixels 定义 iframe 的左侧和右侧的边距。
name frame_name 规定 iframe 的名称。
sandbox “”allow-formsallow-same-originallow-scriptsallow-top-navigation 启用一系列对 iframe 中内容的额外限制。
scrolling yesnoauto 规定是否在 iframe 中显示滚动条。
seamless seamless 规定 iframe 看上去像是包含文档的一部分。
src URL 规定在 iframe 中显示的文档的 URL。
srcdoc HTML_code 规定在 iframe中显示的页面的 HTML 内容。
width pixels% 定义 iframe 的宽度。

API调用

普通BV视频地址例如:https://www.bilibili.com/video/BV1Xt411n7iJ 

普通AV视频地址例如:https://www.bilibili.com/video/av60016166

普通多P视频地址例如:https://www.bilibili.com/video/BV1w4411179v/?p=2

可直接输入BV、AV、EP编号如下

视频号: av60016166 || BV1Xt411n7iJ

多P视频号: av66821481?p=2 || BV1w4411179v/?p=2

外链播放:https://xbeibeix.com/api/bilibili/biliplayer/?url=【这里输入BV号】

直接frame

给主题添加自定义样式

将以下代码添加到主题的自定义CSS里

  1. /*视频挂载*/
  2. .iframe_video {
  3. position: relative;
  4. width: 100%;
  5. }
  6. @media only screen and (max-width: 767px) {
  7. .iframe_video {
  8. height: 15em;
  9. }
  10. }
  11. @media only screen and (min-width: 768px) and (max-width: 991px) {
  12. .iframe_video {
  13. height: 20em;
  14. }
  15. }
  16. @media only screen and (min-width: 992px) and (max-width: 1199px) {
  17. .iframe_video {
  18. height: 30em;
  19. }
  20. }
  21. @media only screen and (min-width: 1200px) {
  22. .iframe_video {
  23. height: 40em;
  24. }
  25. }
  26. .iframe_cross {
  27. position: relative;
  28. width: 100%;
  29. height: 0;
  30. padding-bottom: 75%
  31. }
  32. .iframe_cross iframe {
  33. position: absolute;
  34. width: 100%;
  35. height: 100%;
  36. left: 0;
  37. top: 0
  38. }

复制视频源代码

打开B站视频网页,找到如下嵌入代码然后复制
<iframe src="//player.bilibili.com/player.html?aid=11932135&cid=19697229&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

修改代码

复制嵌入代码到文章需要放置的位置。然后在给iframe这个标签添加class="iframe_video"

`

               
 
版权声明:小蟹 发表于 2021-04-19 14:08:22。
转载请注明:iframe嵌入BiliBili视频方法B站视频外链 | 风暴蟹自媒体导航博客
免责声明:本文来自风暴蟹自媒体导航发布,但不代表本站的观点和立场。- 侵权点我

暂无评论

暂无评论...