1. 江汉SEO|江汉SEO优化|分享江汉网站建设优化知识-【多佳科】首页
  2. SEO优化

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

多佳科 • • SEO优化

方法 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日

    相关推荐