智能摘要 DeepSeek
本教程介绍如何在WordPress文章中嵌入YouTube视频并实现全宽响应式效果。方法：在编辑器中使用带 `wp-block-embed__wrapper` 类的容器包裹iframe，再通过自定义CSS设置16:9比例、绝对定位及100%宽高，即可让视频自适应不同屏幕宽度。

在这篇教程中，我们将介绍如何在 WordPress 文章中嵌入 YouTube 视频并使其铺满文章内容的宽度。通过使用适当的 HTML 结构和自定义 CSS 样式，你可以让视频在不同设备上保持响应式效果。

步骤 1：在 WordPress 编辑器中嵌入视频

在你的 WordPress 编辑器中（无论是经典编辑器还是 Gutenberg 编辑器），嵌入代码放在文章内容中。

例如：

<div class="wp-block-embed__wrapper">
    <iframe src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allowfullscreen></iframe>
</div>

步骤 2：添加自定义 CSS 到主题

你可以通过 WordPress 后台的外观定制器添加自定义 CSS：

  1. 转到 外观 -> 自定义 -> 额外的 CSS。
  2. 将以下 CSS 代码粘贴到文本框中，然后保存更改。
.wp-block-embed__wrapper{
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
    max-width: 100%;
    background: #000;
}

.wp-block-embed__wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

步骤 3：确保样式生效

确保你在 WordPress 文章中嵌入视频的 div 容器使用了 wp-block-embed__wrapper 类，以便正确应用自定义 CSS 样式。发布或更新你的文章，然后预览前端页面，确保视频能铺满文章内容的宽度并保持响应式效果。

这样，你的 YouTube 视频将能够铺满文章内容的宽度，并根据浏览器窗口的大小自动调整大小。现在，你可以在文章中轻松嵌入全宽度的响应式 YouTube 视频了。