youtube의 퍼간 동영상을 한 줄로 웹 사이트의 가로 너비에 맞추기 CSS

세 줄로 해설

youtube의 내장 동영상의 가로 폭이 웹 사이트보다 커지는 원인은 iframe의 width 지정으로 인해

좀처럼 이상한 방법의 HTML이나 CSS가 아닌 한, 이하의 CSS를 넣는 것으로 해결할 것

iframe[src^="https://www.youtube.com/embed/"] { max-width: 100%; }

좀 더 세세하게 해설

youtube의 동영상으로부터 매입 코드를 취득하면, 이하와 같은 HTML 태그가 카피된다.

youtube에서 오른쪽 클릭 → 삽입 코드를 복사하여 얻을 수있는 태그 (보기 쉽기 때문에 도중에 개행)

<iframe width="1133" height="637" src="https://www.youtube.com/embed/f0RJ1_709DY" 
frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

이를 그대로 복사하면 사이트의 구조(특히 스마트폰)에 따라서는 프레임의 가로폭을 돌출하는 경우가 있다.

・yotube의 내장 동영상이, 테두리를 돌리는 이미지도


개발자 툴로 시험한 느낌, <iframe> 에 width계의 CSS를 적용하면 해결할 것 같은 느낌이었다.
그냥 class를 추가하거나 부모 <div>를 만드는 것은 싫기 때문에 youtube의 <iframe>에만 적용하는 방법을 검토했다.
그 결과, 이하의 CSS를 넣는 것으로, 대응할 수 있었다.

youtube의 내장 동영상을 프레임에서 밀어내지 않는 CSS

iframe[src^="https://www.youtube.com/embed/"] {
 max-width: 100%;
}

http나//로 참조하거나 다른 도메인의 퍼간 동영상이었던 경우는, 이대로라면 적용되지 않습니다.
너무 이상한 일도 아닌 한 기존 CSS에는 영향을 미치지 않을 것이다.height:auto; 를 넣어도 좋은 생각은 하지만, 자신이 시도한 범위에서는 동영상이 매우 작아졌다.

비고

투고 직전에, 만약을 위해 기존의 qiita 기사를 찾아 보면, 이미 기출이었다.

Youtube의 퍼가기 태그를 편집하지 않고 반응형화
htps : // 코 m / 토로사 l 몬 / ms / 65 에 d8fcf61c2 5 5 f8 예 # 3

삭제하는 것도 물론 없기 때문에, 이대로 투고.