Stop video when closing the modal

[Wakkos]

Hi,

When I add a HTML5 video and close the modal, the video keeps playing on background.

<section class="semantic-content" id="modal-text" tabindex="-1"
        role="dialog" aria-labelledby="modal-label" aria-hidden="true">

    <div class="modal-inner">
        <header id="modal-label"><!-- Header --></header>
        <div class="modal-content">
          <video preload="auto" controls poster="video/video.jpg">
            <source src="video/video.webm" type="video/webm">
            <source src="video/video.ogg" type="video/ogg"/>
            <source src="video/video.mp4" type="video/mp4">
          </video>
        </div>
        <footer><!-- Footer --></footer>
    </div>

    <a href="#!" class="modal-close" title="Close this modal" data-close="Close"
        data-dismiss="modal">×</a>
 </section>

Should we add some JS to stop the video from playing? I don't find any way to do this with HTML/CSS.

[anselmh]

Yes, this should be done in JavaScript IMO. It’s a simple thing and should be added in a future version to improve video/audio support.

[Wakkos]

I suck at JS, but I came with this quick solution:

function stopVideo() {
 document.getElementById('video').pause();
}

And then add the ID="video" to my video tag in HTML.

The problem is that we have t modify the close link with onclick="stopVideo()". I can bet that there's a better way to do it if we detect the bookmark URL to play or pause the video.

[anselmh]

I think there’s a better way to do this. Will dig into when finding some time, thanks for your report and quick solution.

[drublic]

We should utilize the custom events of CSS Modal. This is nothing that we
should add to the core, IMO, since not everybody uses video. There could be
a plugin snipped which adds the functionality.

On Wed, Jan 29, 2014 at 1:15 PM, Anselm Hannemann
notifications@github.comwrote:

I think there's a better way to do this. Will dig into when finding some
time, thanks for your report and quick solution.

Reply to this email directly or view it on GitHubhttps://github.com//issues/89#issuecomment-33579352
.

[grayghostvisuals]

I'm doing this right now with Froogaloop that hooks into the Vimeo API. https://github.com/vimeo/player-api/tree/master/javascript

// Robodemo
var roboDemo = $('#ipad_video');

// Play Robodemo
function playRoboDemo(playerID) {
    var player = $f(playerID.get(0));

    // Player Ready Event
    player.addEvent('ready', function() {
        player.api('play');
    });
}

// Pause Robodemo
function pauseRoboDemo(playerID) {
    var player = $f(playerID.get(0));

    // Player Ready Event
    player.addEvent('ready', function() {
        player.api('pause');
    });
}

// Add these to your click events or scroll if you want
playRoboDemo(roboDemo);
puaseRoboDemo(roboDemo);

[Wakkos]

@drublic is kind of right, it it's a CSS modal then it would stop being CSS. but as you said, this JS would be for "flavoring" its use. Allowing html5 video in modal. (and maybe a fullscreen mode?).

But it ups to you guys!

[drublic]

Can we create a directory plugins and add JS functionality for videos
aso. there? I'd like to see that.

On Thu, Jan 30, 2014 at 1:15 PM, Daniel Martínez
notifications@github.comwrote:

@drublic https://github.com/drublic is kind of right, it it's a _CSS_modal then it would stop being
CSS. but as you said, this JS would be for "flavoring" its use.
Allowing html5 video in modal. (and maybe a fullscreen mode?).

But it ups to you guys!

Reply to this email directly or view it on GitHubhttps://github.com//issues/89#issuecomment-33682463
.

[anselmh]

Yes, think this would be a good idea. We also could provide one plugin for html5 video and another for the vimeo API then…

[Wakkos]

That sounds Awesome.