Build a Video Compilation Page - Build a Video Compilation Page

HTML-CSS
1

Tell us what’s happening:

  1. Your first iframe element should have a src attribute set to a valid video.
    I am having the same issue with all 3 of my videos, I have tried to add and delete the /embed in the address, I simply cannot seem to get any videos to load properly, everything else is fine.
    Please help so I can continue to learn.

Your code so far

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Video Compilation Page</title>
</head>

<body>
    <main>
        <h1>HTML Skill Videos from FreeCodeCamp</h1>
        <p>This page contains a few videos from the HTML portion of the Full Stack Developer course at <a href ="https://www.freecodecamp.org/">freeCodeCamp</a> I am trying to add some of my own flair, adding a horizontal rule under my H1 heading, and adding a link to the website that we are using to study on. While I try my best not to copy, I will be posting the same videos as are shown in the example, as I do not yet know all the rules of posting others content.</p>
        
        <section>
            <h2>HTML</h2>
            <p>Html is the language that creates the content of a webpage. It uses elements, enclosed in tags and works with CSS and JavaScript to create the finished webpage.</p>
                <iframe 
                source="https://www.youtube.com/embed/watch?v=GDGejH3SDNQ"  title="Video on HTML" 
                height="200" 
                width="500"></iframe>
        </section>

        <section>
            <h2>CSS</h2>
            <p>This video is about CSS or Cascading Style Sheets. It is responsible for a large amount of the presentation, including fonts, colors etc.</p>
            <iframe source="https://www.youtube.com/embed/watch?v=OXGznpKZ_sA" title="Video on CSS" 
               height="200" 
               width="500"></iframe>
        </section>

        <section>
            <h2>JavaScript</h2>
            <p>JavaScript is a highly dynamic computer language program that can help add interactivty and dynamic behaviours to your webpages.</p>
            <iframe source="https://www.youtube.com/embed/watch?v=jS4aFq5-91M"      title="Video on JavaScript" 
                    height="200" 
                    width="500">
                    </iframe>
        </section>
    </main>

</body>

</html>

Your browser information:

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

Challenge Information:

Build a Video Compilation Page - Build a Video Compilation Page
https://www.freecodecamp.org/learn/full-stack-developer/lab-video-compilation-page/build-a-video-compilation-page

2

Please identify the src attribute on your first iframe element.

3

It is the first video from the 3 example videos, I was not sure about some of the rules of taking other videos off of the web yet, so I had to use these example videos. The only other error I got was in regards to the (hr)(/hr) I added for fun after watching some of the HTML youtube video today, so I got rid of that and am just left with invalid source attributes for my videos. Again, I have tried all 3 of them, the first one if you copy and past it directly into a search bar and get rid of the /embed goes directly to the video, so I am stumped and have been going at this for hours.

4

That is a url. What is your full src attribute?

5
<iframe

src=“video-url”

width=“width-value”

height=“height-value”

allowfullscreen>

I apologize for being confused here, I am thinking that Ifame is an element, and that source is the attribute, the value of the source attribute is the URL is it not? I am so confused and so close lol.

6

This is not the code you wrote above.

Please show me the src attribute in the iframe element you wrote above.

7

source="https://www.youtube.com/embed/watch?v=GDGejH3SDNQ"

This?

8 
<iframe width="560" height="315" src="https://www.youtube.com/embed/GDGejH3SDNQ?si=cABbhLx0th81sknV" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

This! I was able to figure this one out.

1 Like
9

That’s a ‘source’ attribute :wink:

1 Like
10

Thank you, I do have a question though if you don’t mind. Why is it that the url from my source attribute is different when I copy and past it from the address bar, as opposed to when I go to share the video and click embed to give me the proper info. I am glad to be moving on, I am focusing solely on my full stack cert right now and not the C#, to many terms to try to remember all at once. Love this site, hoping it can lead me to new adventures in life.

11

that you should ask to YouTube itself, they have designed their video sharing like that

but consider, is the link from the url bar a link to the video or to a page that contains the video?

1 Like
12

I see I see, so I was essentially trying to link that entire page. I love how you guys are supportive in this community, and I do believe I understand this concept now, I guess you can teach an old dog new tricks after all. I am enjoying this so much, I just wish I had started at a younger age. Thanks for the guidance!