Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

HTML HTML Video and Audio Media Basics Overview of Web Media

HTML VIDEO

please what is wrong with my code?

<div class="wrapper">
    <h1> LISTEN TO HIT BOY BACK IN TRAFFIC </h1>
   <video controls>
       <source src="https://drive.google.com/file/d/1qFqz-EHxBQJ_DDStwsLwDfyHoo8M6-Xe/view?usp=drivesdk">
   </video>


</div>
.wrapper{
    margin: 10px auto;
    max-width: 90%;
    border-radius: 10px;
    background-color: black;
}
video{
    margin: 0 auto;
    display: block;
    border: 1px solid black;
}

It's possible it's the type of video file you're playing. You're not identifying the video type and you're trying to pass a video from Google Drive. It's not specifically identified as a video file (mp4, etc.).

I plugged in a different video, and it seems to work fine.

HTML

<div class="wrapper">
  <h1> LISTEN TO HIT BOY BACK IN TRAFFIC </h1>
  <video controls>
    <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4" type="video/mp4">
    Sorry, your browser doesn't support embedded videos.
  </video>
</div>

CSS

.wrapper {
  margin: 10px auto;
  max-width: 50%;
  border-radius: 10px;
  background-color: black;
}
video {
  margin: 0 auto;
  display: block;
  border: 1px solid black;
  width: 100%;
}

2 Answers

YouTube isn't a good comparison. There's a completely different method for embedding a YouTube video. To embed the video you tried, you would use the following markup:

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

To embed the video you suggested, you would use the following markup:

<div class="wrapper">
  <h1> LISTEN TO HIT BOY BACK IN TRAFFIC </h1>
  <video controls>
    <source src="http://treehouse-code-samples.s3.amazonaws.com/html-video-and-audio/bridge.mp4" type="video/mp4">
    Sorry, your browser doesn't support embedded videos.
  </video>
</div>

You can take a look at this video on how to embed a YouTube video.

https://youtu.be/d2HklGs8jp4

i copied a video url from youtube and it is not working. i has no specification as a mp4 or ogg. such as this one "https://youtu.be/VGJSJhFp5_s". i has nothing like ".mp4 or .ogg" unlike this one "http://treehouse-code-samples.s3.amazonaws.com/html-video-and-audio/bridge.mp4" so how do i go about that one