Welcome to the Treehouse Community
Looking to learn something new?
christina cantero316 Points
Having Issues with Video in HTML
I m trying to get a few videos coded into a website I am building with HTML and styling with CSS. I have tried everything but nothing seems to be working. this is what i have right now:
<div id="wrapper"> <section> <ul id="gallery"> <li> <iframe width="420" height="315" src="//www.youtube.com/embed/eIKUt-Z7YJA" frameborder="0" allowfullscreen></iframe> <p>Medicine Ball muscle tightening</p> </li> <li> <a href="videos/IMG_3909.MOV"> <video src="videos/IMG_3909.MOV" alt="medicine ball"> <p>Medicine Ball muscle tightening</p> </a> </li> <li> <a href="videos/IMG_3967.MOV"> <video src="videos/IMG_3967.MOV" alt="mat exercises"> <p>Mat weight exercises</p> </a> </li> <li> <a href="videos/IMG_4375.MOV"> <video src="videos/IMG_4375.MOV" alt="bench weights"> <p>Bar weights & squats for Men</p> </a> </li> <li> <a href="videos/IMG_9237.MOV"> <video src="videos/IMG_9237.MOV" alt="Jahar"> <p>Jahar Vann work out session</p> </a> </li> </ul> </section> </div> <footer> <a href="https://www.facebook.com/FitnessMadePersonalNYC"><img src="img/facebook.png" alt="Facebook Logo"></a> <a href="http://instagram.com/fitnessmadepersonalnyc#"><img src="img/Instagram.png" alt="Instagram Logo"></a> <p>© 2014 Fitness Made Personal.</p>
christina cantero316 Points
i actually got it to work. I uploaded all my clients videos to youtube and used an embed coding. realised the http link wasnt working and had to fanagle it a little bit but they are all showing so far
I know that you are hosting the videos on youtube now so this is mostly for future reference in case you want to self host in the future.
When working with html5 video, the browsers only support a few different formats and there currently isn't a single format that all the browsers support.
See this link for some compatibility tables: http://caniuse.com/#search=video%20format
At this point in time I think it's safe to provide mp4 and webM and that should cover most of the browsers. So this means that if you wanted to go back to hosting yourself as in your sample code then you would need to convert your .MOV into those other two video formats using a video converter.
The reason it works on youtube is because they're doing this behind the scenes for you. You upload a video and they transcode it into all the different formats required by browsers.
Here's some sample code that you can use as a starting point taken from https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_HTML5_audio_and_video
<video controls> <source src="foo.ogg" type="video/ogg"> <source src="foo.mp4" type="video/mp4"> Your browser does not support the <code>video</code> element. </video>
So rather than use the
src attribute to specify a single format, as you've done in your code, you would use multiple
source tags within the
video tag. This way, each browser can go through the source tags one by one until it finds a format that it knows how to play. After the source tags, you can have fallback content in case the browser doesn't support the video element. Most do now with the exception of older versions of IE. Some people will use a flash video fallback to support older IE versions.
Hope this helps.
Also, I just noticed that you weren't closing your video tags.