Build a Video Display Using iframe - Step 5

HTML-CSS
1

Tell us what’s happening:

Creating an iframe in Build a Video Display Using iframe - Step 5 in:title, I have an error for not having encrypted-media inside the allow element, but I have it. Can anybody help me?

Your code so far

<!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>

<!-- User Editable Region -->

    <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"
  allowfullscreen>

      </iframe>

<!-- User Editable Region -->

  </body>
</html>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/141.0.0.0 Safari/537.36

Challenge Information:

Build a Video Display Using iframe - Step 5

2 Likes
2

You should not use semicolons as separators inside the allow attribute, only spaces.

1 Like
3

Taking the semicolon out, the problem persists.

4

If errors persist, try reseting the step in the lesson, not just refreshing. But, you only needed to add accelerometer, autoplay and clipboard-write. and be sure to have only spaces in between each seperate value. Hope that helps.

5

Can you share your updated code please?

6 
<iframe 
  width="560" 
  height="315" 
  src="https://www.youtube.com/embed/I0_951_MPE0"
  title="YouTube video player"
  frameborder="0"
  allow="accelerometer autoplay clipboard-write encrypted-media gyroscope picture-in-picture web-share"
  allowfullscreen >
</iframe>
1 Like
7

I’ve edited your post to improve the readability of the code. When you enter a code block into a forum post, please precede it with three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add the backticks.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

8

thank you! when I wrote the code to reply to you, appears the video, as it is correct, the the Free Code Camp site rejects it. I am lost.

9

I corrected the formatting of your element as there were a few stray spaces here and there, which might have been causing the tests to fail. Your code is otherwise essentially correct and passes for me.

10 
<!–<iframe
  width="560"
  height="315"
  src=" https://www.youtube.com/embed/I0_951_MPE0 "   title="YouTube video player"   frameborder="0"   allow="accelerometer autoplay clipboard-write encrypted-media gyroscope picture-in-picture web-share"   allowfullscreen ></iframe>—>
1 Like
11

why is it commented out?

I’ve edited your post to improve the readability of the code. When you enter a code block into a forum post, please precede it with three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add the backticks.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

12 
The problem persists, and the code is rejected for not having encrypted-media.
//<iframe
      width="560"
      height="315"
      src="https://www.youtube.com/embed/I0_951_MPE0"
      allow="encrypted-media gyroscope picture-in-picture accelerometer autoplay clipboard-write web-share"
  allowfullscreen>
     </iframe>//
13

please post all the code you have in the editor

please use three backticks on their own line above the code: ```, and three backticks on their own line below the code

1 Like
14

Strangely, the updated code which you posted yesterday passes for me, whilst the code you posted today doesn’t. The values in the allow attribute are in a different order, which I think is throwing off the tests.

More importantly though, your allow attribute should only have three values:

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

If you Reset the step and then add the attribute again, with only those three values, you should pass.

1 Like