Creating a full screen video overlay without Bootstrap

Question

I am fairly new to jQuery but really liking what it can do, I am making good progress with it but I am unable to achieving to open a div when I press play. I do not want to use Bootstrap modal for this project. What I want is to open the video as a full width and height of viewport width and height. Currently it is not playing, here is my codepen and my code is below.

As an example I want to achieve something like this, when play is pressed.

$(document).ready(function(){
    $(".glyphicon-play-circle").click(function(){
        $(".movie").css("display","block")
    })
})

CSS

.movie{
    display:none;
    position:absolute;
    z-index:1;
    top:0;
    width:100%;
    height:100vh;
    background:black;

}

Yonas Hailu · Accepted Answer

I have made a changes to your code. I disabled the fullscreen content because it's enough one video to make it full. No need extra video it make it work.

$(document).ready(function() {
    $(".glyphicon-play-circle").click(function() {
        $(".movie").css("display", "block")
        $("#bgvid").toggleClass("is-not-active");
        $(".fullscreen").toggleClass("is-video-active");
        $(".fullscreen.is-video-active").prop("autoplay", true);
    });
});

* {
    box-sizing: border-box;
    ;
}

body,
html {
    height: 100%;
}

.logo {
    float: left;
    width: 50%;
}

.glyphicon {
    font-size: 3em;
    text-align: center;
}

.header {
    position: relative;
    z-index: 1;
}

nav {
    float: right;
    width: 50%;
}

nav ul {
    list-style: none;
}

nav li {
    float: left;
    padding: 15px
}

nav li a {
    display: block;
    color: #000;
    margin-top: 1em;
}

.centered {
    position: relative;
    top: 50%;
    z-index: 1;
    color: #fff;
    text-shadow: 1px 1px 10px #000;
}

.content {
    /*position: relative;*/
}

video {
    background-size: cover;
    width: 100%;
    position: absolute;
    height: auto;
    top: 0;
    left: 0;
    z-index: -1;
    object-fit: contain;
}


.movie {
    display: none;
    position: absolute;
    z-index: 1;
    top: 0;
    width: 100%;
    height: 100vh;
    background: black;
}
.is-not-active { display: none;}
.fullscreen { display: none; }
.fullscreen.is-video-active {
    position: fixed;
    left: 0;
    top: 0;
    width: 0;
    right: 0;
    height: 100%;
    width: 100%;
    z-index: 9999;
    background: #000;
    display: block;
}

.is-video-active video {
    right: 0;
    width: auto;
    height: 100%;
}




      
        
            
        
        
            
                Home
                About
                Teach
                Contact us
            
        
    
    
        
            
                We Evolve with our students
                
                    
                    
            

        

        
        
            
                
                    
                        
        
          Collapsible Group Item #1
        
                
                    
                    
                        
                            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                        
                    
                
                
                    
                        
        
          Collapsible Group Item #2
        
      
                    
                    
                        
                            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                        
                    
                
                
                    
                        
        
          Collapsible Group Item #3
        
      
                    
                    
                        
                            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Creating a full screen video overlay without Bootstrap

Answers (1)

Related Questions