iframe을 사용하여 비디오 디스플레이 만들기

Source: Dev.to

Overview

몇 개의 이론 수업을 통해 iframe 요소를 다루는 방법을 학습한 뒤, freeCodeCamp의 Build a Video Display Using iframe 워크숍으로 넘어갔습니다. 이 연습은 간단한 HTML 보일러플레이트로 시작해 점차 iframe 요소에 새로운 속성을 소개합니다.

Adding the Heading

첫 번째 단계는 iframe Video Display라는 텍스트가 들어간 헤딩을 추가하는 것이었습니다.

Creating the iframe

그 다음 “ 요소를 만들고 src 속성을 제공된 YouTube URL로 설정했습니다.

Configuring the allow Attribute

여섯 번째 레슨에서 allow 속성이 다음을 포함하도록 확장되었습니다:

• encrypted-media – 비디오 보호를 위한 암호화된 미디어 확장을 활성화합니다.
• gyroscope – 장치 센서에 대한 접근을 허용합니다.
• web-share – 네이티브 공유 대화상자를 통해 iframe 콘텐츠를 공유할 수 있게 합니다.

전체 allow 값은 이제 다음과 같습니다:

accelerometer autoplay clipboard-write encrypted-media gyroscope picture-in-picture web-share

Setting referrerpolicy

거의 마지막 연습에서는 referrerpolicy 속성을 strict-origin-when-cross-origin 값으로 추가해야 했습니다. 이는 페이지에서 iframe으로 이동할 때 Referer 헤더에 포함되는 정보를 제어합니다.

referrerpolicy="strict-origin-when-cross-origin"

Enabling Full‑Screen Playback

마지막으로 allowfullscreen 속성을 추가해 비디오를 전체 화면 모드로 볼 수 있게 했습니다.

allowfullscreen

Conclusion

이 워크숍을 통해 allow 속성 구성, referrerpolicy 사용, 전체 화면 재생 활성화와 같은 여러 새로운 개념을 배웠으며, 다음 실습인 Build a Video Compilation Page에서 이를 다시 다룰 예정입니다.