在BearBlog嵌入自适应宽度YouTube视频，全屏功能失效求助

问题核心 #

BearBlog的内容渲染机制会过滤iframe的全屏相关属性，导致你手动添加的全屏设置被丢失，最终触发YouTube的"Full screen is unavailable"提示。

解决方案 #

1. 添加自适应视频容器CSS #

在BearBlog的「Settings」→「Custom CSS」中插入以下代码，确保视频适配手机/电脑端宽度：

.video-container {
  position: relative;
  padding-bottom: 56.25%; /* 对应16:9标准视频比例，可按需调整 */
  height: 0;
  overflow: hidden;
  max-width: 100%;
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

2. 嵌入带全屏权限的视频代码 #

编辑文章时切换到HTML编辑模式，粘贴以下代码（替换你的视频ID为实际YouTube视频ID）：

<div class="video-container">
  <iframe src="https://www.youtube.com/embed/你的视频ID" 
          frameborder="0" 
          allowfullscreen
          allow="fullscreen">
  </iframe>
</div>

关键细节 #

• 同时保留allowfullscreen（旧标准）和allow="fullscreen"（新标准）双属性，避免被BearBlog的过滤机制遗漏。
• 必须用HTML模式粘贴代码，可视化编辑器会自动剥离iframe的特殊权限属性。
• 若仍出现属性丢失，可尝试简化allow值为仅allow="fullscreen"，排除其他权限项的干扰。

内容的提问来源于stack exchange，提问作者Kolja