iframe 모바일 width height 100% 처리

 

* 에디터 html 수정하기 기능에서 iframe width 100%, height 100% 처리하기

( PC + MOBILE 두마리 토끼를 한번에~ )

 

 

#에디터에서 style 태그 사용이 가능한경우

(코딩을 모르는 운영자를 위한 가이드 추가)

1. <style>아래 소스코드 복사하세요</style> 영역 추가

2. <iframe></iframe> 영역 밖으로 <div class="iframe-container"></div> 추가

<style>
.iframe-container {position:relative;padding-bottom:56.25%;padding-top:30px;height:0;overflow:hidden;}
.iframe-container iframe,
.iframe-container object,
.iframe-container embed {position: absolute;top:0;left:0;width:100%;height:100%;}
</style>

<!-- class iframe-container 부여 -->
<!-- div or p 태그 -->
<div class="iframe-container" style="text-align: center; " align="center">
  <iframe src="https://www.youtube.com/embed/주소" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
</div>

 

 

#에디터에서 style 태그 사용이 불가능한경우

(코딩을 모르는 운영자를 위한 가이드 추가)

1. <iframe></iframe> 영역 밖으로

<div style="position:relative;padding-bottom:56.25%;padding-top:30px;height:0;overflow:hidden;""></div> 추가

2. <iframe></iframe> 내부에 style 속성 추가

style="position:absolute;top:0;left:0;width:100%;height:100%;"

<div style="position:relative;padding-bottom:56.25%;padding-top:30px;height:0;overflow:hidden;" align="center">
  <iframe style="position:absolute;top:0;left:0;width:100%;height:100%;" src="https://www.youtube.com/embed/주소" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
</div>

 

 

참~쉽죠잉~