Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
FancyBox Youtube
<a href="#" data-toggle="modal" data-target="#mine-performance">VIDEO</a>
<div class="modal fade video-modal" id="mine-performance" tabindex="-1" role="dialog" aria-labelledby="videoModal" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<div>
<iframe width="100%" height="507" src="//www.youtube.com/embed/E68OQIw4T-Q?rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</div>
$(document).ready(function () {
console.clear()
$('#mine-performance').modal('show');
$('.ytp-large-play-button').click()
});
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>
.video-modal .modal-body {
padding: 0;
}
.video-modal .modal-body iframe {
border: 0 none;
margin: 0 0 -6px;
}
.video-modal .modal-content {
border-radius: 0;
}
.video-modal .close {
background-color: #000000 !important;
border: 2px solid #ffffff !important;
border-radius: 13px;
color: white;
font-size: 20px;
height: 26px;
opacity: 1;
position: absolute;
right: -13px;
text-shadow: none;
top: -13px;
width: 26px;
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/css/bootstrap-theme.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment