如何防止视频/一个框扩展得太宽

支持
1


image
image1230×541 108 KB

Brave 浏览器 100% 缩放

/* --- 7. EMBEDS & MEDIA --- */
.twitterstatus {
  max-width: 345px !important;
  width: auto !important;
}

.video-placeholder-container,
.video-placeholder-wrapper,
.lazy-video-wrapper {
  max-width: 690px !important;
  width: auto !important;
}

.allowlistedgeneric {
  max-width: 690px !important;
  width: auto !important;
  padding: 10px !important;
  margin: 0 3px 3px 3px !important;
}
2

与此相比，Discourse 上的显示为 100%

image
image804×433 72.2 KB

Firefox 上为 100%

image
image1265×536 115 KB

3

好吧，我想我用 Gemini 解决了这个问题：
*如果这有点大材小用，请告诉我。

/* YouTube/video player fix */
.video-placeholder-container,
.video-placeholder-wrapper,
.lazy-video-wrapper {
  /* 这是保护罩：它将播放器用户界面锁定在 690px */
  max-width: 690px !important;
  width: 100% !important; 
}

.lazy-video-wrapper iframe,
.lazy-video-wrapper video {
  /* 这会填充保护罩 */
  width: 100% !important;
  max-width: 100% !important; 
  height: auto !important;
  aspect-ratio: 16 / 9 !important;
  margin: 0 !important;

}

/* 特别针对上传的视频播放器容器 */
.video-container {
  max-width: 690px !important;
  text-align: left !important;
}

Brave 浏览器上 100%：

image
image699×516 98.9 KB