教程：如何嵌入Bilibili视频在手机上高度自适应

在嵌入视频网站（如 Bilibili）的视频时，通常会遇到在手机设备上显示不佳的问题。本文将教你如何通过简单的 HTML 和 CSS，使视频在各种设备上都能保持正确的宽高比，并高度自适应。

问题描述

默认嵌入的视频通常使用固定高度（如 600px），这可能在手机上导致布局问题，例如：

视频高度过高或过低，影响观看体验。
视频无法根据屏幕宽度自动调整高度。

通过本文的教程，你将学会如何让嵌入的视频高度自适应，以适配不同的屏幕尺寸。

解决方案

我们将使用一个父级容器配合 padding-bottom 的技巧来实现响应式视频嵌入。

HTML 和 CSS 代码

以下是完整的代码示例：

原视频：<iframe src=”//player.bilibili.com/player.html?isOutside=true&aid=113648055881454&bvid=BV1nhBVYCE8A&cid=27329825162&p=1″ scrolling=”no” border=”0″ frameborder=”no”framespacing=”0″ allowfullscreen=”true”>


    <iframe
        src="https://player.bilibili.com/player.html?bvid=BV1nhBVYCE8A"
        scrolling="no"
        border="0"
        frameborder="no"
        framespacing="0"
        width="100%"
        height="100%"
        allowfullscreen="true"
        sandbox="allow-top-navigation allow-same-origin allow-forms allow-scripts"
        style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">

代码详解

父级容器 (div)：
- position: relative;：确保子元素（iframe）能相对于父级容器定位。
- width: 100%;：让容器的宽度占据父元素的 100%。
- padding-bottom: 56.25%;：这是基于 16:9 的宽高比。如果你的视频比例不同，可以调整此值。例如：4:3 的比例为 padding-bottom: 75%;。
- height: 0;：通过 padding-bottom 代替固定高度。
- overflow: hidden;：隐藏超出容器范围的内容。
嵌入的视频 (iframe)：
- position: absolute;：让 iframe 填满父级容器。
- top: 0; left: 0; width: 100%; height: 100%;：让 iframe 的宽高随父级容器变化。
- 其他属性如 allowfullscreen 和 sandbox 提供了嵌入视频的交互权限。

使用步骤

复制代码：将上述代码复制到你的 HTML 文件中。
替换视频链接：将 src="https://player.bilibili.com/player.html?bvid=BV1nhBVYCE8A" 替换为你要嵌入的视频链接。
调整比例（可选）：如果你的视频不是 16:9，可以修改 padding-bottom 的值。例如：
- 4:3 比例：padding-bottom: 75%;
- 21:9 比例：padding-bottom: 42.86%;
测试效果：保存文件后在浏览器中查看，确保视频在手机设备上显示正常。

注意事项

跨域问题：某些视频网站可能对嵌入视频有权限限制，请确保使用正确的 sandbox 属性。
比例调整：确保输入正确的视频宽高比，否则可能导致显示问题。

效果演示

以下是该代码在不同设备上的效果：

PC 浏览器

手机浏览器

通过这种方式，你可以轻松实现视频嵌入的高度自适应，无需额外的 JavaScript 或复杂布局。

希望本文对你有所帮助！

發表回覆

wordpress开发

wordpress教程

WordPress插件/主题【免费】

教程：如何嵌入Bilibili视频在手机上高度自适应

问题描述