网页 iframe 嵌入极简bilibili播放界面

要在网页中嵌入一个极简的 Bilibili 播放界面，可以使用 <iframe> 标签。以下是具体步骤和代码示例：

1. 获取 Bilibili 视频的嵌入代码

首先，找到你想要嵌入的 Bilibili 视频。在视频播放页面，点击“分享”按钮，然后选择“嵌入代码”。你会得到类似以下的代码：

<iframe src="//player.bilibili.com/player.html?aid=视频AID&cid=视频CID&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

2. 简化嵌入代码

为了创建一个极简的播放界面，你可以移除一些不必要的属性，并调整播放器的大小。以下是一个简化后的示例：

<iframe
    src="//player.bilibili.com/player.html?aid=视频AID&cid=视频CID&page=1"
    width="640"
    height="360"
    frameborder="0"
    allowfullscreen>
</iframe>

3. 自定义播放器样式

你可以通过 CSS 进一步自定义播放器的样式。例如，设置播放器的宽度和高度，或者添加一些边框和阴影效果：

<style>
    .bilibili-player {
        width: 100%;
        height: 400px;
        border: 1px solid #ccc;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }
</style>

<iframe
    class="bilibili-player"
    src="//player.bilibili.com/player.html?aid=视频AID&cid=视频CID&page=1"
    frameborder="0"
    allowfullscreen>
</iframe>

4. 响应式设计

为了确保播放器在不同设备上都能正常显示，你可以使用 CSS 的 max-width 和 padding-bottom 来实现响应式设计：

<style>
    .bilibili-player-container {
        position: relative;
        width: 100%;
        padding-bottom: 56.25%; /* 16:9 宽高比 */
        height: 0;
        overflow: hidden;
    }
    .bilibili-player {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: none;
    }
</style>

<div class="bilibili-player-container">
    <iframe
        class="bilibili-player"
        src="//player.bilibili.com/player.html?aid=视频AID&cid=视频CID&page=1"
        frameborder="0"
        allowfullscreen>
    </iframe>
</div>

5. 注意事项

• 视频AID 和 视频CID 是 Bilibili 视频的唯一标识符，你需要将它们替换为实际的值。
• 如果你希望播放器自动播放，可以在 src 中添加 &autoplay=true 参数。
• 确保你的网页支持 HTTPS，因为 Bilibili 的嵌入播放器要求使用 HTTPS。

通过以上步骤，你可以在网页中嵌入一个极简的 Bilibili 播放界面，并根据需要进行自定义。