wordpress网站里放bilbil视频,并自动适应屏幕

方法 1:手动调整 iframe 代码

  1. 在 Bilibili 视频页面点击「分享」→「嵌入代码」,复制 iframe 代码。
  2. 修改 iframe 的 width 和 height 属性(建议宽度设为 100% 或固定值如 800px):

html添加代码

<iframe 
    src="//player.bilibili.com/player.html?aid=视频AID&bvid=视频BVID" 
    width="100%" 
    height="500px" 
    scrolling="no" 
    frameborder="no" 
    allowfullscreen>
</iframe>

方法 2:通过 CSS 强制调整比例

在 WordPress 自定义 CSS(外观 → 自定义 → 额外CSS)中添加:

/* 固定比例(推荐 16:9) */
.bilibili-iframe-container {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 比例 */
    margin: 20px 0;
}
.bilibili-iframe-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

使用时将 iframe 包裹在 div 中:.

html添加

<div class=”bilibili-iframe-container”> <iframe src=”…”></iframe> </div>

方法 3:使用插件

安装插件(如 Iframe Widget 或 EmbedPress),它们提供可视化调整 iframe 尺寸的功能。

方法 4:主题兼容性检查

部分 WordPress 主题会限制 iframe 宽度,可尝试:

  1. 临时切换至默认主题(如 Twenty Twenty-Four)测试是否正常。
  2. 在主题设置中查找「内容宽度」选项并调大。

补充建议

  • 响应式适配:优先使用 width="100%" 配合 CSS 的 padding-top 比例控制。
  • Bilibili 参数:在视频链接后添加 &high_quality=1 可能提升默认分辨率。

如果仍有问题,提供具体页面链接或主题名称可以进一步排查!

方法 5:wordpress在网页中嵌入视频用HTML区块,前面加src空格 自适应屏幕大小

通过此方法,无需额外插件即可轻松引用B站等外部视频,实现16:9自适应播放器,优化网页内容展示。此操作对于网站维护者而言,既节省资源,又能提供良好的用户体验。

为了鼓励分享与帮助他人,我们特别设置赞赏功能,感谢各位的支持与关注。

  • 版权声明:所有资源均来源于互联网,如有侵权请联系我们删除
  • 发表,

  • 转载请注明:wordpress网站里放bilbil视频,并自动适应屏幕 | 「多佳科博客」
  • (0)
    多佳科多佳科
    上一篇 2025年5月22日 下午9:27
    下一篇 2025年5月24日

    相关推荐