유튜브에서 영상을 공유하기를 이용하여 태그로 가져오게 되면 사이즈가 지정되어 가져오게 됩니다.
데스크 탑 전용 사이트라면 상관이 없지만 모바일 및 테블릿에서 접속하게 되면 화면 좌우에 스크롤이 생기면서 디자인이 깨지기도 하고 영상 부분만 크게 차지하는 경우가 있습니다.
이런 경우에는 기존 태그에 새로운 태그를 추가하여 처리하는 방법이 있습니다.
저 같은 경우는 먼저 스타일을 추가하고 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 소스가 변동 되거나 나를 수 있으니 확인이 필요합니다.