modal with accordion

jquery show/hide vide in modal

by Igor Cuckovic

HTML

<!doctype html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>jQuery UI Accordion - Collapse content</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <link rel="stylesheet" href="/resources/demos/style.css">
    <!--     <script src="https://code.jquery.com/jquery-1.12.4.js"></script> -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />

    <script>
      $(function() {
        var videoPlaying = 0;

        $("#videoContainer").hide();

        $("#videoActivation").click(function() {
          $("#videoContainer").toggle("slow", function() {
            if (!videoPlaying) {
              $('.video').trigger('play');
              $('#videoActivation').text("Click here to close the video");
              videoPlaying = 1;
            } else {
              $('.video').trigger('pause');
              $('#videoActivation').text("Click here to watch the video");
              videoPlaying = 0;
            }
          })
        })



        /*         var videoPlaying = 0;
                
                
                $('#ex1').on($.modal.BEFORE_CLOSE, function(event, modal) {
                    console.log("modal closed")
                $("#accordion").accordion({
                        active: false
                    
                    });
                    $('.video').trigger('pause');
                    //$('#videoActivation').text("Click here to watch the video");
                    //videoPlaying = 0;
                
                
                });
           ...

CSS

video {
  background: transparent url("https://www.fillmurray.com/g/500/300") 50% 50% / cover no-repeat;
}