Background-Video

<!-- JS -->

<script type="text/javascript">

//<![CDATA[

 

    // play/pause Video    

        var video = document.getElementById("myVideo");

        var btn = document.getElementById("myBtn");

 

        function myFunction() {

            if (video.paused) {

                video.play();

                btn.innerHTML = "Pause Background-Video";

            } else {

                video.pause();

                btn.innerHTML = "Play Background-Video";

            }

        }

 

    

     $('.myvideo').appendTo('.background-area');

    

//]]>

</script>

<!-- CSS -->

<style type="text/css">

/*<![CDATA[*/

 

        html {

            margin-bottom: 90px !important;

        }

    

        .content-options {

            background-color: #ffffffe3;

        }

 

    

        .jqbga-web--image {

            background: none !important;

        }

    

 

        #myVideo {

            position: fixed;

            left:0;

            bottom: 0;

            min-width: 100%;

            min-height: 100%;

            z-index: -1;

    }

    

    #myVideo:not(.cc-pagemode-default .myVideo) {

        position: relative;

        width: 100%;

        height:50%;

        }

 

        .content {

            position: fixed;

            bottom: 0;

            left:0;

            background: rgba(0, 0, 0, 0.5);

            color: #f1f1f1;

            width: 100%;

            min-height: 50px;

            padding: 20px;

         

        }

 

        #myBtn {

            width: 300px;

            font-size: 18px;

            padding: 10px;

            border: none;

            background: #000;

            color: #fff;

            cursor: pointer;

            border-radius: 10px;

        }

 

        #myBtn:hover {

            background: #ddd;

            color: black;

        }

 

/*]]>*/

</style>