在非100%宽度的包装器上使用youtube-video作为背景

<div id="video-wrapper"></div>

#video-wrapper {
  width: 800px; /* 设置包装器的宽度 */
  height: 450px; /* 设置包装器的高度 */
  position: relative; /* 设置包装器的定位方式 */
}

// 使用JavaScript
var videoWrapper = document.getElementById("video-wrapper");
videoWrapper.innerHTML = '<iframe width="100%" height="100%" src="https://www.youtube.com/embed/VIDEO_ID?autoplay=1&controls=0&showinfo=0&autohide=1&loop=1&mute=1" frameborder="0" allowfullscreen></iframe>';

// 使用jQuery
$("#video-wrapper").html('<iframe width="100%" height="100%" src="https://www.youtube.com/embed/VIDEO_ID?autoplay=1&controls=0&showinfo=0&autohide=1&loop=1&mute=1" frameborder="0" allowfullscreen></iframe>');

#video-wrapper {
  /* 其他样式设置 */
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1; /* 将包装器放置在其他内容的后面 */
}

/* 添加遮罩效果 */
#video-wrapper::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* 设置遮罩的颜色和透明度 */
}