Skip to content

Instantly share code, notes, and snippets.

@anam-hossain

anam-hossain/modal-video-full.html

Created May 8, 2015 01:49
Show Gist options
  • Save anam-hossain/7a10734514a9c53d88a8 to your computer and use it in GitHub Desktop.
Save anam-hossain/7a10734514a9c53d88a8 to your computer and use it in GitHub Desktop.
Download ZIP
Full example - autoplay youtube video in a Modal (Bootstrap + Jquery)
Raw
modal-video-full.html
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script>
$(function() {
$(".video").click(function () {
var theModal = $(this).data("target"),
videoSRC = $(this).attr("data-video"),
videoSRCauto = videoSRC + "?modestbranding=1&rel=0&controls=0&showinfo=0&html5=1&autoplay=1";
$(theModal + ' iframe').attr('src', videoSRCauto);
$(theModal + ' button.close').click(function () {
$(theModal + ' iframe').attr('src', videoSRC);
});
});
});
</script>
</head>
<body>
<button class="btn btn-success btn-lg video" data-video="https://www.youtube.com/embed/8L5PqL4ylIU" data-toggle="modal" data-target="#videoModal">Play Video 1</button>
<button class="btn btn-default btn-lg video" data-video="https://www.youtube.com/embed/HBdcL7YsdBY" data-toggle="modal" data-target="#videoModal">Play Video 2</button>
<div class="modal fade" id="videoModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<iframe width="100%" height="350" src="" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</body>
</html>
@jhonhenrybernal
Copy link

La rompiste me funciono perfectamente

@emb03
Copy link

emb03 commented Aug 22, 2019

This saved my butt! Thank you!!!!

@patapouf123
Copy link

Hello for always launch autoplay
replace <iframe width="100%" height="350" src="" frameborder="0" allowfullscreen></iframe>
by

<iframe width="100%" height="350" src="" frameborder="0" allowfullscreen allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture">

Thanks

@harry9345
Copy link

well done

@manojsukale
Copy link

Not working in Mobile can anyone tell me the solution.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment