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 The Video Element

Posted by bediako maxwell
bediako maxwell
165 Points

HTML VIDEO

i have a video stored on my computer and i'm inserting it into the video tag but it is not working, please how do i go about that one too?:

<div class="wrapper">
    <h1> LISTEN TO HIT BOY BACK IN TRAFFIC </h1>
   <video controls>
       <source src="Cypher & Cris Shaker (CyCris) _Sena Brown  Surely (FREESTYLE).mp4" type="video/mp4">

   </video>
</div>

1 Answer

Heidi Fryzell
seal-mask
MOD
.a{fill-rule:evenodd;}techdegree seal-36
Heidi Fryzell
Front End Web Development Treehouse Moderator 25,178 Points
Heidi Fryzell
.a{fill-rule:evenodd;}techdegree seal-36
Heidi Fryzell
Front End Web Development Treehouse Moderator 25,178 Points

Hi Bediako,

There are a couple things to be aware of.

1) Make sure the video file is in the same folder as the HTML file you are showing above.

2) The name of the file is probably going to give you a problem because it has spaces and other special characters in it. When spaces are in URLs they are usually represented as "%20". This is because of URL encoding. https://www.w3schools.com/tags/ref_urlencode.asp

So you need to replace every "space" in your src attribute with "%20" in your HTML.

Also, I am noticing that you have parentheses in your file name as well so they would have to be encoded. Oh, and the "&", that will need to be encoded. In general, I would avoid all special characters when choosing a file name. I think the underscore will work and you don't have to encode it.

Here is the code with URL encoding.

<div class="wrapper">
    <h1> LISTEN TO HIT BOY BACK IN TRAFFIC </h1>
   <video controls>
       <source src="Cypher%20%26%20Cris%20Shaker%20(CyCris)%20_Sena%20Brown%20Surely%20%28FREESTYLE%29.mp4" type="video/mp4">

   </video>
</div>

Or... you could rename the file and use "-" (hyphens) instead of spaces in the file name and then you can copy the file name right into your HTML if it doesn't have any more spaces in it.

Change your file name to exactly what is between the quotations of the src attribute.

New filename: Cypher-and-Cris-Shaker-CyCris-Sena Brown-Surely-FREESTYLE.mp4

Code:

<div class="wrapper">
    <h1> LISTEN TO HIT BOY BACK IN TRAFFIC </h1>
   <video controls>
       <source src="Cypher-and-Cris-Shaker-CyCris-Sena Brown-Surely-FREESTYLE.mp4" type="video/mp4">

   </video>
</div>

I hope this helps and happy coding.