[HTML] 유튜브 iframe 전체화면으로 만들기

유튜브링크를 긁어 iframe에 넣으면 아래처럼 종종 전체화면이 되지 않는 문제가 있다. 

외 안돼..

온갖 방법을 다 시도해봤는데 안되서 문제 해결한 과정을 정리해둔다. 전체화면을 구현할 수 있는 방법은 먼저 iframe 자체에서 구현해주는 기능을 사용해도 되고 만약 구현되어 있지 않다면 JS(Javascript)를 이용해 구현하면된다. 오늘은 긁어온 링크가 유튜브 처럼 자체 전체화면을 지원한다는 가정하에 작업을 진행하도록 하겠다. 먼저 iframe이 아마 아래처럼 생겼을 것이다.

<iframe class="rounded-md w-full h-full" src="https://www.youtube.com/embed/cvPS_25gRPs" 
        style="border: 0;" 
        rameborder="no" 
        width="100%">
</iframe>

이제 iframe에 하나만 추가해주면된다. allowfullscreen 이다! 자 이제 추가하고 한번 확인해보자!

<iframe  src="https://www.youtube.com/embed/cvPS_25gRPs" 
        style="border: 0;" 
        allowfullscreen>
</iframe>

 

다들 나처럼 고생하지 않았으면 한다! 도움이 되었다면 하트 한번씩 부탁드린다. 감사합니다 탱큐!