Build a Video Display Using iframe

Source: Dev.to

Overview

After completing a couple of theory lessons on working with the iframe element, I moved on to the Build a Video Display Using iframe workshop from freeCodeCamp. The exercise starts with a simple HTML boilerplate and gradually introduces new attributes for the iframe element.

Adding the Heading

The first step was to add a heading with the text iframe Video Display.

Creating the iframe

An “ element was then created and the src attribute was set to the supplied YouTube URL.

Configuring the allow Attribute

In lesson six, the allow attribute was expanded to include:

• encrypted-media – enables encrypted media extensions for protecting the video.
• gyroscope – grants access to device sensors.
• web-share – allows sharing of the iframe content through native share dialogs.

The full allow value now reads:

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

Setting referrerpolicy

The penultimate exercise required adding the referrerpolicy attribute with the value strict-origin-when-cross-origin. This controls the information sent in the Referer header when navigating from the page to the iframe.

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

Enabling Full‑Screen Playback

Finally, the allowfullscreen attribute was added so the video can be viewed in full‑screen mode.

allowfullscreen

Conclusion

The workshop introduced several new concepts—such as configuring the allow attribute, using referrerpolicy, and enabling full‑screen playback—that will be reinforced in the next lab, Build a Video Compilation Page.