ContextQMD
Back to Freecodecamp

Step 6

curriculum/challenges/english/blocks/workshop-build-a-video-display-using-iframe/68ba9c4f1688914d72876097.md

latest1.6 KB
Original Source

--description--

Add encrypted-media, gyroscope, and web-share to the existing values in the allow attribute.

These three will allow the use of encrypted media extensions to protect the video, grant access to the device’s motion and orientation sensors, and allow sharing the iframe content through the device's native share dialogs.

--hints--

The allow attribute of your iframe element should have encrypted-media as one of its values.

js
const iframeEl = document.querySelector('iframe')
const iframeElAllowAttr = iframeEl?.getAttribute('allow')
assert.match(iframeElAllowAttr, /encrypted-media/)

The allow attribute of your iframe element should have gyroscope as one of its values.

js
const iframeEl = document.querySelector('iframe')
const iframeElAllowAttr = iframeEl?.getAttribute('allow')
assert.match(iframeElAllowAttr, /gyroscope/)

The allow attribute of your iframe element should have web-share as one of its values.

js
const iframeEl = document.querySelector('iframe')
const iframeElAllowAttr = iframeEl?.getAttribute('allow')
assert.match(iframeElAllowAttr, /web-share/)

--seed--

--seed-contents--

html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Display Videos in an iframe</title>
  </head>
  <body>
    <h1>iframe Video Display</h1>
    <iframe
      width="560"
      height="315"
      src="https://www.youtube.com/embed/I0_951_MPE0"
--fcc-editable-region--
      allow="accelerometer autoplay clipboard-write"
--fcc-editable-region--
    >

    </iframe>
  </body>
</html>