ContextQMD
Back to Freecodecamp

Step 5

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

latest1.9 KB
Original Source

--description--

One of the attributes is allow. It's like a permission list that tells the browser what features the iframe is allowed to use.

Here's an iframe element with the allow attribute:

html
<iframe
  allow="accelerometer autoplay clipboard-write encrypted-media gyroscope picture-in-picture web-share"
></iframe>

Add the allow attribute with the value accelerometer, autoplay, and clipboard-write.

accelerometer lets the iframe use motion sensors so it can detect things like device tilting and rotation. autoplay lets the video start playing automatically, and clipboard-write lets the iframe write data to the user’s clipboard.

--hints--

Your iframe element should have an allow attribute set to accelerometer.

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

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

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

The allow attribute of your iframe element should have clipboard-write as one of its values.

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

--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--
      
--fcc-editable-region--
    >

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