개발노트
목록
[CSS] 유튜브 영상 반응형으로 자동 리사이즈되게 수정하기
CSS반응형유튜브영상리사이즈video-wrap
CSS 2024.04.11 130 회 읽음
CSS 24.04.11 130


유튜브에서 영상을 공유하기를 이용하여 태그로 가져오게 되면 사이즈가 지정되어 가져오게 됩니다. 

데스크 탑 전용 사이트라면 상관이 없지만 모바일 및 테블릿에서 접속하게 되면 화면 좌우에 스크롤이 생기면서 디자인이 깨지기도 하고 영상 부분만 크게 차지하는 경우가 있습니다.

이런 경우에는 기존 태그에 새로운 태그를 추가하여 처리하는 방법이 있습니다.

저 같은 경우는 먼저 스타일을 추가하고 PHP 에서 내용을 치환하여 처리하고 있습니다.

.video-wrap {position:relative; padding-bottom:56.25%; padding-top:30px; height:0; overflow:hidden;}
.video-wrap iframe,
.video-wrap object,
.video-wrap embed {position:absolute; top:0; left:0; width:100%; height:100%;}


PHP 치환 명령을 이용하여 대체하는 방법으로 처리하였습니다.

$contents = str_replace('<iframe ','<div class="video-wrap"><iframe id="video" ', $dta);
$contents = str_replace('</iframe> ','</iframe></div>', $dta);


주의 사항으로는 공유 소스를 가져올 때 iframe 소스가 변동 되거나 나를 수 있으니 확인이 필요합니다.

목록