bootstrap 4 modal playing iframe when page loads?

Question

My site has a full screen BG video on load which is the same video I want to play when user clicks play button to open modal. My issue is right when the page loads the modal video (iframe) is playing in the background. I do not want this. I want page loads > muted BG video >user clicks play > opens modal >plays video and stops when it closes. I tried using autoplay=0 which works if directing to a youtube src video but this video is in my project folder.

 

 
   

  
    
    
        
         We Believe 
 People Make
 The Difference
          
          
            Book a Demo

            
              
                
                  
                
              
              
                Play Video

D. Stevens · Accepted Answer

Im not sure if you're required to use an iframe to play your video file, but assuming you are not this example using the tag should have the functionality you are describing.

$('.launch-modal').click(function() {
  $('.modal').fadeIn(200, function() {
  	$('#sample-video').get(0).play()
  });
});

$('.close').click(function() {
  $('.modal').fadeOut(100, function() {
  	$('#sample-video').get(0).pause();
  });
});

.bg-video {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  z-index: -1;
}

.banner {
  position: relative;
  background-color: #fff;
  text-align: center;
  padding: 20px;
  margin: 250px 50px 0px;
}

.modal {
  display: none;
  position: fixed;
  width: 33.3%;
  left: 33.3%;
  top: 200px;
}


.modal video {
  max-width: 100%;
  max-height: 100%;
}




  
    
  
  
    
      
        
          We Believe 
 People Make
 The Difference
        
        
          Book a Demo

          
              
                
                  
                
              
              
                Play Video

bootstrap 4 modal playing iframe when page loads?

Answers (1)

Related Questions