49 lines
1.3 KiB
Markdown
49 lines
1.3 KiB
Markdown
---
|
|
title: "媒体嵌入测试：视频与图片"
|
|
date: 2026-05-16T12:00:00+08:00
|
|
draft: false
|
|
description: "测试 Hugo 对 B 站视频嵌入和多种图片格式的渲染效果。包含 iframe 视频播放器、横版图片、内联对比和居中展示，验证移动端和桌面端的布局表现。"
|
|
---
|
|
|
|
这是一篇测试文章，验证 Hugo 对 B 站视频嵌入和图片渲染的支持。
|
|
|
|
## 嵌入式视频
|
|
|
|
下面是 B 站视频 BV1AWRVB2EAz 的嵌入播放器：
|
|
|
|
<div style="position: relative; padding-bottom: 75%; height: 0; overflow: hidden; margin: 1.5rem 0;">
|
|
<iframe
|
|
src="//player.bilibili.com/player.html?bvid=BV1AWRVB2EAz&page=1&high_quality=1&autoplay=0"
|
|
scrolling="no"
|
|
border="0"
|
|
frameborder="no"
|
|
framespacing="0"
|
|
allowfullscreen="true"
|
|
style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">
|
|
</iframe>
|
|
</div>
|
|
|
|
视频通过 B 站官方播放器嵌入，支持弹幕、倍速、画质切换。
|
|
|
|
## 图片渲染测试
|
|
|
|
### 横版图片
|
|
|
|
|
|
|
|
### 内联对比
|
|
|
|
两张图并排展示：
|
|
|
|
|
|
|
|
|
|
|
|
### 小图居中
|
|
|
|
|
|
|
|
---
|
|
|
|
以上测试覆盖了视频嵌入和多种图片展示场景。如果你在手机或其他设备上看到布局异常，需要针对性调整。
|