Looking for a way to make a video modal automatically open on page load and allow users to reopen it by clicking a button? Here's a snippet of code that might help you achieve that:
HTML
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <!-- BootsTrap library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <!-- jQuery library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <!-- Popper JS -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> <!-- Latest compiled JavaScript -->
</script>
</head>
<body>
<main class="body-flex container-fluid d-flex flex-column flex-fill">
<div class="row flex-column flex-fill">
<div class="col-12 col text-center flex-fill"> <!-- change btn position here in "txt-center" -->
<h1></h1>
<button type="button" class="btn btn-primary video-btn custombtnsize" data-toggle="modal" data-src="https://www.youtube.com/embed/ld2Vn8ouxqY" data-target="#myModal"> Ajuda </button> <!-- Button trigger modal , you can use btn-lg to responsive large btn -->
</div>
</div>
</main>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <!-- Modal -->
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<div class="embed-responsive embed-responsive-16by9"> <!-- 16:9 aspect ratio -->
<iframe class="embed-responsive-item" src="" id="video" allowscriptaccess="always" allow="autoplay"></iframe>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
JS
<script>
$(document).ready(function() { // Gets the video src from the data-src on each button
var $videoSrc;
$('.video-btn').click(function() {
$videoSrc = $(this).data( "src" );
});
console.log($videoSrc); // when the modal is opened autoplay it
$('#myModal').on('shown.bs.modal', function (e) {
$("#video").attr('src',$videoSrc + "?autoplay=1&modestbranding=1&showinfo=0" ); // set the video src to autoplay and not to show related video. Youtube related video is like a box of chocolates... you never know what you're gonna get
})
$('#myModal').on('hide.bs.modal', function (e) { // stop playing the youtube video when I close the modal
$("#video").attr('src',$videoSrc); // a poor man's stop video
})
}); // document ready
</script>
CSS
<style>
body {margin: 0,2rem;}
.body-flex {
min-height:100vh;
display: flex;
flex-direction: column;
}
.flex-fill {
flex: 1 1 auto;
}
.custombtnsize {
width: 120px !important;
height: 50px !important;
}
.modal-dialog {
max-width: 800px;
margin: 30px auto;
}
.modal-body {
position:relative;
padding:0px;
}
.close {
position:absolute;
right:-30px;
top:0;
z-index:999;
font-size:2rem;
font-weight: normal;
color:#fff;
opacity:1;
}
</style>