Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML HTML Video and Audio Media Basics Overview of Web Media

Posted by bediako maxwell
bediako maxwell
165 Points

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;
}
Jared Newnam
Jared Newnam
42 Points

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

Jared Newnam
Jared Newnam
42 Points

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

bediako maxwell
bediako maxwell
165 Points
bediako maxwell
bediako maxwell
165 Points

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