Build a Video Display Using iframe

Having completed a couple of theory lessons on Working with the iframe Element yesterday, this afternoon saw me moving onto the Build a Video Display Using iframe - another freeCodeCamp workshop.

Again, HTML boilerplate was supplied before the first step asked to simply add a heading with the text iframe Video Display. One thing I do appreciate is how these exercises start simple, making them easier to follow.

In the next steps, an iframe element was created, attributes were added, and a video was embedded using the supplied URL. Repeatedly using elements such as src in lessons makes the process easier to remember.

After that I had to add the allow attribute, which tells the browser which features the iframe element is allowed to use. Here's the lesson I completed:

    <iframe
      width="560"
      height="315"
      src="https://www.youtube.com/embed/I0_951_MPE0"
      allow="accelerometer autoplay clipboard-write encrypted-media gyroscope picture-in-picture web-share"
    >
    </iframe>

In lesson six, I was tasked with adding encrypted-media, gyroscope, and web-share to the allow attribute. This trio allows the use of encrypted media extensions in order to protect the video, grant access to sensors on the device, and also allows sharing of the iframe content through native share dialogs.

The penultimate exercise had me adding the referrerpolicy attribute, set to strict-origin-when-cross-origin. This controls what information the browser sends in the Referer header when navigating from your page to the iframe.

Finally, I added the allowfullscreen to the iframe element to ensure the video can be viewed in full screen mode.

Another interesting workshop, with quite a few new concepts for me to explore further. The next lab, Build a Video Compilation Page, will no doubt help reinforce many of these ideas. Until next time!