Back to Freecodecamp

Step 8

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

latest1.6 KB
Original Source

--description--

Last but not least, the attribute you will add is allowfullscreen. As it implies, it allows the video to be viewed in full screen mode.

With that, the workshop is completed!

--hints--

Your iframe element should have a allowfullscreen attribute.

js
const iframeEl = document.querySelector('iframe')
assert.exists(iframeEl?.getAttribute('allowfullscreen'))

--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"
      allow="accelerometer autoplay clipboard-write encrypted-media gyroscope web-share"
      referrerpolicy="strict-origin-when-cross-origin"
--fcc-editable-region--
      
--fcc-editable-region--
    >

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

--solutions--

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"
      allow="accelerometer autoplay clipboard-write encrypted-media gyroscope web-share"
      referrerpolicy="strict-origin-when-cross-origin"
      allowfullscreen
    >
    </iframe>
  </body>
</html>