영상/하나의 박스가 너무 넓어지지 않게 하는 방법

개발
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-placeholder-container,
.video-placeholder-wrapper,
.lazy-video-wrapper {
  /* 이것이 방패입니다: 플레이어 UI를 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