Product Landing Page - iframe

HTML-CSS
1

Using an iframe element seems to fail the test associated with the 5th user story. I had to scrap my entire code earlier to figure out why I couldn’t pass this test. Now that I’m redoing it, it seems deleting that element or replacing it with a video element instead fixes this issue.

I’m using Firefox with uBlock Origin, Privacy Badger, and a few youtube related extensions that are unlikely to cause this problem since the test fails even with a blank src attribute. Is there any solution to this so I can actually embed the video I want to use?

2

We’d need to see your HTML (with your attempt to use an iframe). I’m pretty sure many people have successfully embedded a youtube video using the iframe method and passed all the tests. Even the FCC demo page uses an iframe for this.

To display your code in here you need to wrap it in triple back ticks. On a line by itself type three back ticks. Then on the first line below the three back ticks paste in your code. Then below your code on a new line type three more back ticks. The back tick on my keyboard is in the upper left just above the Tab key and below the Esc key.

3 
<header id="header">
      <img id="header-img" src="https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fyellowpages.qa%2Fweb%2Fsites%2Fdefault%2Ffiles%2Fyou%2520logo%2520here.png&f=1&nofb=1" />
      <nav id="nav-bar">
        <ul>
          <li><a class="nav-link" href="#features">Parts</a></li>
          <li><a class="nav-link" href="#how-to-assemble">How to assemble a PC</a></li>
          <li><a class="nav-link" href="#contact-info">Contact Info</a></li>
        </ul>
      </nav>
    </header>
      <section id="features">
      <div class="desc">
        <h2>Central Processing Unit (CPU)</h2>
      </div>
      <div class="desc">
        <h2>Motherboard</h2>
        <p></p>
      </div>
      <div class="desc">
        <h2>Random Access Memory (RAM)</h2>
        <p></p>
      </div>
      <div><!--Storage--></div>
      <div><!----></div>
    </section>
    <section id="how-to-assemble">
      <iframe id="video" src="https://youtu.be/PXaLc9AYIcg" />
    </section>
    <section id="contact-info"></section>

This is my entire body section

4

You aren’t quite embedding the youtube correctly which is why it isn’t showing up. You need to open the video in youtube, click on Share, select Embed, and then copy/paste the HTML they give you (which will be in an iframe). Then add the id to the iframe that the tests are asking for and you should pass all the tests related to the video.

6

Ah, that fixed it. The test passes now, and it even fixed the x frame issues I had earlier. Thank you!

7

You could tell that just by looking at the code? That is wasn’t an iframe I mean?

8

I’m not completely sure I understand your question. I’ve embedded a ton of youtube videos over the years, so I am very familiar with how to do it and I was able to tell quickly what the problem with the video was.

9

Lol I was just impressed that all you had to do is look at that portion of the code and know it wasn’t right. I know I looked at it and didn’t see anything wrong, but im a noob anyway sooo

10

We were all noobs at one time, no shame in that :slight_smile:

11

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.