Video Element

Get Help HTML
,
#1

Hello everyone,
I was working on a personal project and trying to insert a video into it. However, the video doesn’t play, but it doesn’t display the “video not supported” text either. Is there a way this could be fixed? the video element is right near the bottom.

<!DOCTYPE html>
<html>
<body>
  <div>
    <h1>Hello World!</h1>
    <p>This is my <strong>first</strong> website, I hope you <em>enjoy</em> it.</p>
  </div>
  <div>
    <h2> About me </h2>
    <h3> Ambition </h3>
    <p>My ambition is to become a software engineer. I am taking the <br>Full-stack development course on <strong>codecademy</strong> to help me achieve that goal. <br>My dream job is one at Google.</p>
    <h3> Favourite foods </h3>
    <ul>
      <li>Indomie <br><img src="https://th.bing.com/th/id/R.c7972249bbc5b5a976caa95b4fd8a219?rik=00vDc8tDAvE0Vw&pid=ImgRaw&r=0" alt="picture of instant ramen"/></li>
      <li>Swallow <br><img src="https://static.wixstatic.com/media/3e11a5_675fdb871aa64d3dbac65901a0ce8b00~mv2.jpg/v1/fit/w_1000%2Ch_1000%2Cal_c%2Cq_80/file.jpg" alt="picture of nigerian swallow/fufu" /></li>
      <li>Jollof Rice <br><img src="https://th.bing.com/th/id/OIP.Nu7R_XBrwpdmC_0pK5Gy4QHaJU?pid=ImgDet&rs=1" alt="picture of Jollof Rice" /></li>
    </ul>
    <h3> Favourite film franchises (in order) </h3>
    <ol>
      <li>Jurassic Park</li>
      <li>Harry Potter</li>
    </ol>
    <h3> College </h3>
    <p> My preffered college is MIT, though that is a serious reach for me. I think a more realistic goal would definitely be:
      <ul> 
        <li> Carnegie Mellon Univeristy </li> 
        <li>University of California: Irvine</li> 
      </ul>
      <video src="https://www.youtube.com/watch?v=UYpKaiRwkgM" width="360" height="200" controls>
      video not supported
      </video>
    Both are very good schools that I would love to go to.</p>
    <img src="Screenshot (3).png" alt="Me struggling with my internship" />
  </div>
</body>
</html>
#2

As far as I’m aware, the HTML video tag doesn’t support using YouTube videos as a source. You would need to download the video as an mp4 or the like, or else use YouTube’s built in embed tags.

#3

I think the best way to do it would be to use an iframe to link the youtube video.

<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY">
</iframe>

Check here for more information on iframes

1 Like
#4

Hello!

Ethan’s suggestion is accurate. The best alternative to add a Youtube video to your web page is by using an “iframe” tag. Moreover, you can add parameters at the end of the video url, so you can manage things, such as autoplay, loop, mute, and controls.

<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY?autoplay=1&mute=1">
</iframe>

Luis
***