Bootstrap video modal hide / stop video

Hi Piotr,

I have this video modal here (top corner left button):
http://www.quebecguitare.ca/profs-admin ... oie-lepine

Backend: http://www.quebecguitare.ca/administrat ... ingDetails

The video won't stop when the bootstrap modal is closed or hidden.

This is the code used.
I've also added a script to stop the video on hide. No luck!

Any Clues?

Thank you
Regards

Code: Select all

<!-- VIDEO PRESENTATION MODAL -->
<!-- Button to trigger modal -->
<a href="#myModal" role="button" class="btn" data-toggle="modal"><i class="fa fa-youtube-play"></i>Launch demo modal</a>

<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">

// Stop video on hide
<script>
//Load player api asynchronously.
var tag = document.createElement('script');
tag.src = "//www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag[removed].insertBefore(tag, firstScriptTag);
var done = false;
var player_3;
function onYouTubeIframeAPIReady() {
player_3 = new YT.Player('ivideo_3');
$('#video_3').on('hide', function () {
player_3.stopVideo();
});
}
</script>

<?php
$video = $this->fields->getFieldById(48);
if( isset($video) ) {
echo '<p />' . $video->getCaption();
echo ': ' . $video->getOutput(1);
}
?>

</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>

Ref.: http://stackoverflow.com/questions/9761 ... odel-close

Hi

I honestly have no idea ;/ Your videos are loaded inside an iframe, and the code You are using is most probably for a player directly. Please check if there is no other way to embed videos, html5 method maybe.

As I remember modal loading video should remove all it's content on close than create it again when is activated, but Your modal link doesn't even have an url to the video, so I do not think there is a way to use this method as well ;/

I would advice to replace this modals with something else.

Hi

Please take a look here: http://stackoverflow.com/questions/2261 ... dal-closes I found it while working on Your other question.

Hi Piotr, I followed the link and tried the solution still no success.

This is the code that generates the video link. It's a custom field that has the complete video URL.

Code: Select all

     <?php
     $video = $this->fields->getFieldById(48);
     if( isset($video) ) {
     echo '<p />' . $video->getCaption();
     echo ': ' . $video->getOutput(1);
     }
    ?>

Code: Select all

<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Modal header</h3>
  </div>
  <div class="modal-body" id="yt-player">

     <?php
     $video = $this->fields->getFieldById(48);
     if( isset($video) ) {
     echo '<p />' . $video->getCaption();
     echo ': ' . $video->getOutput(1);
     }
    ?>
       
    <script type="text/javascript">
    $('#myModal').on('hidden.bs.modal', function () {
        callPlayer('yt-player', 'stopVideo');
     });
   </script>


 </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-primary">Save changes</button>
  </div>
</div>


Any Clues?
Thank you
Regards

Hi

Your code is too complicated to figure it out of content. There has to be a simplier way using iframe instead of the layer. Maybe something like this:

Code: Select all

<?php
     $video = $this->fields->getFieldById(48);
?>
<a class="modal" rel="{handler:'iframe',size:{x:640,y:480}}" href="<?php echo $video->getOutput(1); ?>">Video</a>


are You sure $video value has all the informations about the url ?