내용관리에서 유트브 가로 100% 적용이 되게 하려면 어떻게 해야하나요?
본문
유트브 공유 퍼가기 <iframe width="560" height="315" .. 이걸
width="100%" 하면 먹히지가 않는데요 먹히게 하려면 어떻게 해야나요?
내용관리 페이지 에디터에 넣으니 편집에서만 적용돼고 확인을 누르면
먹히지 않습니다!
내용관리 에디터적용된것은 smarteditor2 겁니다!
도움 부탁드립니다!
답변 4
skin/content/basic/style.css
의 마지막 라인에 아래 css 를 첨가합니다.
iframe[src*='www.youtube.com/'] { display:block; aspect-ratio:16/9; width:100%; }
그리고 유튜브 태그 작성시 width 와 height 는 넣지 않습니다.
만일 basic 스킨 말고 다른 스킨을 쓴다면 동일한 형태로 적용해 주시구요.
모바일스킨에서도 같은 작업을 해 주세요.
에디터에서는 % 성립하지않습니다. px로만 적용이 받습니다.
하여
<iframe width="930" height="523" src="https://www.youtube.com/embed/RTIfqQisTxs" title="[LIVE] 국민의힘 지도부 "국격 무너져 죄송‥체포로 불법 정당화 안 돼" [이슈PLAY] / JTBC News" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
이런식으로 width 넓이값을 최대로 잡아주시면됩니다.
CSS와 HTML 구조를 조정하여 반응형으로 만드는 것이 효과적입니다.
먼저, 아래와 같은 CSS를 추가하여 동영상의 크기를 유지합니다:
.youtube-container {
position: relative;
width: 100%;
padding-bottom: 56.25%; /* 16:9 비율 */
height: 0;
overflow: hidden;
}
.youtube-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
YouTube의 <iframe> 코드를 <div class="youtube-container">로 감싸는 구조로 변경합니다.
＊위 CSS를 적용한 후, YouTube의 <iframe> 코드를 아래와 같이 HTML 구조로 변경
<div class="youtube-container">
<iframe src="https://www.youtube.com/embed/RTIfqQisTxs"
frameborder="0"
allowfullscreen>
</iframe>
</div>
부모 요소가 width: 100%로 설정되어 있어야 반응형 구조가 제대로 작동합니다.
부모 요소의 스타일을 확인하거나, 필요시 아래와 같이 스타일을 추가하세요:
<div style="width: 100%; padding-bottom: 56.25%; position: relative;">
<iframe src="https://www.youtube.com/embed/RTIfqQisTxs"
style="position: absolute; width: 100%; height: 100%;"
frameborder="0"
allowfullscreen
loading="lazy">
</iframe>
</div>
SmartEditor2의 HTML 편집 모드에서 위 코드를 추가하고 저장하세요.
＊SmartEditor2 적용 방법
- SmartEditor2의 HTML 편집 모드로 전환.
- 위에서 완성된 코드를 복사하여 HTML에 삽입.
- 저장 후 미리보기 또는 실제 페이지에서 동영상이 반응형으로 표시되는지 확인
SmartEditor2가 iframe 태그나 style 속성을 필터링할 경우,
관리자 설정에서 필터링을 비활성화하거나 iframe 태그를 허용 목록에 추가
위에 제시한 방법은 다양한 자료에서 YouTube 임베드를 구현하는 데 권장되는 것입니다.
에디터에서 HTML 로 하시고
본문에 아래 코드를 넣고 저장을 해보세요.
<div style="width: 100%; padding-bottom: 56.25%;position:relative;">
<iframe src="https://www.youtube.com/embed/ZbZSe6N_BXs" style="position:absolute;width:100%;height:100%;"></iframe>
</div>
이렇게 iframe 을 부모 div 로 감싸고 부모의 너비지정과 16:9 비율인 56.25% 로 padding-bottom 을 잡으면
현재 페이지의 최대 너비만큼 늘어나고 늘어난 비율만큼 iframe 의 영상도 늘어납니다.
