FancyBox Youtube

fancybox-youtube.markdown

FancyBox Youtube

A Pen by dimas lanjaka on CodePen.

License.

index.html

<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>

script.js

$(document).ready(function () {
  console.clear()
  $('#mine-performance').modal('show');
  $('.ytp-large-play-button').click()
});

scripts

<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>

style.css

.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;
}

styles

<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" />