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

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 24,520 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.