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

General Discussion

christina cantero
christina cantero
316 Points
Posted by christina cantero
christina cantero
316 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>&copy; 2014 Fitness Made Personal.</p>
Adam Sackfield
Adam Sackfield
Courses Plus Student 19,663 Points

i would recommend FancyBox super easy to implement, nice features github

3 Answers

Adam Sackfield
PLUS
Adam Sackfield
Courses Plus Student 19,663 Points
Adam Sackfield
Adam Sackfield
Courses Plus Student 19,663 Points

demo

christina cantero
christina cantero
316 Points
christina cantero
christina cantero
316 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

Jason Anello
PLUS
Jason Anello
Courses Plus Student 94,610 Points
Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

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.

christina cantero
christina cantero
316 Points
christina cantero
christina cantero
316 Points

Thank you Jason. I figured i would have had to change the format to something else. I realized that it was done on an iphone because of the MOV extension. Thats why I just uploaded them all to a youtube channel to make life alot easier.

Thank you as well Adam for your help.

This was all very useful information for me for future video page issues