HTML5 video in Colorbox

roybman commented 7 years ago

I have a page with a mix of images and video. I want to make a full screen colorbox slideshow that can show all images and video available on the page by clicking on any of the images or video on the page. The image part is no problem. The video part I can't figure out. I used one of the 'example' pages included in the colorbox download to test including a video file.

<script>
    $(document).ready(function(){
        $(".group2").colorbox({rel:'group2', transition:"fade"});
        $(".group2vid").colorbox({inline:true, href: '.group2vid', width:500, height:500, rel:'group2', transition:"fade"});
    });
</script>

<body>
    <h1>Colorbox Demonstration</h1>
    <h2>Fade Transition</h2>
    <p><a class="group2" href="../content/ohoopee1.jpg" title="Me and my grandfather on the Ohoopee">Grouped Photo 1</a></p>
    <p><a class="group2" href="../content/ohoopee2.jpg" title="On the Ohoopee as a child">Grouped Photo 2</a></p>
        <video class='group2vid' controls poster='../content/vidulUMNk.png'>
            <source src='../content/vidulUMNk.mp4' type='video/mp4'>
            <source src='../content/vidulUMNk.webm' type='video/webm'>
            "Your browser does not support this video."
        </video>
    <p><a class="group2" href="../content/ohoopee3.jpg" title="On the Ohoopee as an adult">Grouped Photo 3</a></p>

</body>

The html for the video tag is structured as in my site, with multiple sources to accommodate all browsers. When I try running this, the images are fine, but the video won't display. I also tried this changing the "inline:true' to 'iframe:true' (without the href), but had the same result. And yes, the video files and png file were present in the folder. Is it feasible to do what I'm trying to do with colorbox?

jackmoore commented 7 years ago

I put together a demo for myself since I hadn't tried using the video element with it before. I tested only in Chrome, but it worked fine for me.

Are you able to play the video as it currently exists in your document, without Colorbox? If not I would double check the path to the video file to make sure it's correct.

Also I would recommend using different selectors/element for the link and the inline content. Since you assigned Colorbox to .group2vid, Colorbox is capturing click events on that element and canceling the default behavior. Since that is the same element that's being show in Colorbox as inline content it could be interfering with your ability to use the video controls.

Try this instead:

<script>
    $(document).ready(function(){
        $(".group2").colorbox({rel:'group2', transition:"fade"});
        $(".group2vid").colorbox({inline:true, href: '.group2vid video', width:500, height:500, rel:'group2', transition:"fade"});
    });
</script>

<body>
    <h1>Colorbox Demonstration</h1>
    <h2>Fade Transition</h2>
    <p><a class="group2" href="../content/ohoopee1.jpg" title="Me and my grandfather on the Ohoopee">Grouped Photo 1</a></p>
    <p><a class="group2" href="../content/ohoopee2.jpg" title="On the Ohoopee as a child">Grouped Photo 2</a></p>
    <div class='group2vid'>
        <video controls poster='../content/vidulUMNk.png'>
            <source src='../content/vidulUMNk.mp4' type='video/mp4'>
            <source src='../content/vidulUMNk.webm' type='video/webm'>
            "Your browser does not support this video."
        </video>
    </div>
    <p><a class="group2" href="../content/ohoopee3.jpg" title="On the Ohoopee as an adult">Grouped Photo 3</a></p>

</body>

Notice I wrapped your video element and used .group2vid video as the Colorbox href. This way when Colorbox plucks .group2vid video to display it, it will no longer be the same element (or a child of the element) that is intercepting the click event to open Colorbox. Hope that all made sense.

roybman commented 7 years ago

This proved to be helpful. On one hand, I found I did in fact have a typo in the video file name that caused my initial issue. That said, I tried re-testing it the way I had it and could not play the video in colorbox. Clicking on the video, or the play button, would trigger the next function instead of play. Doing it your way allows the video to play. The only issue I'm still having and can't seem to find a way to resolve is that the video doesn't scale to the size of the colorbox popup. The surrounding images all do, but not the video. I tried putting height, width, max-height, max-width css settings on class group2vid, and on 'group2vid video', but nothing seems to impact the scaling. If you have any input on resolving this, it would be greatly appreciated.

jackmoore commented 7 years ago

Scaling would be unrelated to Colorbox, but giving the video element a width should work. Tested it myself and giving the video element a width of '100%' worked as expected.

<video style='width:100%' controls poster='../content/vidulUMNk.png'>
            <source src='../content/vidulUMNk.mp4' type='video/mp4'>
            <source src='../content/vidulUMNk.webm' type='video/webm'>
            "Your browser does not support this video."
</video>

jackmoore commented 7 years ago

You should select the video element in your browser's developer console to make sure the width style you want to apply to it is actually being applied and is not overwritten by another style with higher specificity.

roybman commented 7 years ago

Although I had width defined as '90%' for ".group2vid video" in css, it did not scale the video down when opened in colorbox. Putting the width in the video tag as Jack suggested worked. I typically avoid putting any style parameters directly in my html, but in this case it appears to be the only solution. Thanks very much.

jackmoore commented 7 years ago

Remember that the video element is moved out of the .group2vid element when it's being displayed in Colorbox, so that selector is no longer applicable. You could do something like video { width: 90% } or #colorbox video { width: 90% }.

roybman commented 7 years ago

Yup, the lightbulb went on shortly after I posted my last comment. I already changed my css to address the video tag solely, removed the style attribute from the html, and it works just fine. Thanks again.

roybman commented 7 years ago

So I finally had a chance to test this a little further and encountered the breaking point. The code to include the video tag from the earlier post works fine as long as there is only one video in the group. Once you add a second video to the group, it breaks. What you get is the first video in the group will work, but when you go on to the second video, the first one is shown, not the second one. It appears to be because the video tag uses the src parameter to identify the path to the file, rather than using the href parameter. I tried using the src parameter for a group of images, and it breaks in the same way. Unfortunately, there is no way that I can find to use the href parameter with the video tag, where there is more than one source file. I don't see a solution to this at this point.

jackmoore / colorbox

HTML5 video in Colorbox #812