내용관리에서 유트브 가로 100% 적용이 되게 하려면 어떻게 해야하나요?
본문
유트브 공유 퍼가기 <iframe width="560" height="315" .. 이걸
width="100%" 하면 먹히지가 않는데요 먹히게 하려면 어떻게 해야나요?
내용관리 페이지 에디터에 넣으니 편집에서만 적용돼고 확인을 누르면
먹히지 않습니다!
내용관리 에디터적용된것은 smarteditor2 겁니다!
도움 부탁드립니다!
답변 3
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 넓이값을 최대로 잡아주시면됩니다.
에디터에서 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 의 영상도 늘어납니다.
