视频嵌入

直链视频

<video src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4" controls="controls"></video>
<center class="no-indent-block" style="font-size:14px;color:#C0C0C0;text-decoration:underline">题注</center>

效果如下

题注

注意：添加autoplay="autoplay"可自动播放

哔哩哔哩

直接从视频网页分享获取嵌入代码即可

<iframe src="//player.bilibili.com/player.html?isOutside=true&aid=115790607024273&bvid=BV1vqBkBrEo1&cid=35012739236&p=1&autoplay=0" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" ></iframe>
<center class="no-indent-block" style="font-size:14px;color:#C0C0C0;text-decoration:underline">题注</center>

效果如下

题注

注意：需要在视频url最末添加&autoplay=0以禁用自动播放

CSS统一风格

可以看出默认情况下宽高对齐都不是很适合文章，这里还是使用CSS统一风格

/* 针对 WordPress 博客正文区域内的直链视频生效 */
/* 使用 video 标签直接嵌入的视频文件 */
.entry-content video {
  width: 98%; /* 视频播放器放大到显示区域的98% */ 
  max-width: 100%; /* 确保视频不会超出容器 */
  display: block; /* 将视频设置为块级元素，以便使用 margin: auto 居中 */ 
  margin: 0 auto; /* 水平居中视频 */ 
  aspect-ratio: 16 / 9; /* 保持视频播放器16:9的宽高比 */ 
  border-radius: 5px; /* 给视频播放器添加圆角 */ 
  background-color: #000; /* 视频加载前或无内容时的背景色 */
  object-fit: contain; /* 确保视频内容在框内完整显示，不裁剪 */
}

/* 针对 WordPress 博客正文区域内的哔哩哔哩嵌入视频生效 */
/* 通过其 src 属性包含 "bilibili.com" 的 iframe 进行选择 */ 
.entry-content iframe[src*="bilibili.com"] { 
  width: 98%; /* iframe 放大到显示区域的98% */ 
  max-width: 100%; /* 确保 iframe 不会超出其容器 */
  display: block; /* 将 iframe 设置为块级元素，以便使用 margin: auto 居中 */ 
  margin: 0 auto; /* 水平居中 */ 
  aspect-ratio: 16 / 9; /* 保持视频播放器16:9的宽高比 */ 
  border: none; /* 移除可能存在的默认 iframe 边框 */ 
  border-radius: 5px; /* 给视频播放器添加圆角 */ 
}