You are on page 1of 1

There are three locations that needs to be managed in order to add/change the video.

The framework used is Twitter Bootstrap which has it's own unique semantics which needs
to be followed. I will explain it now for your better understanding.
1. This is the anchor which triggers the modal popup functionality
<a href="#" data-toggle="modal" data-target="#IDofTheModal"></a>
You can probably see that it is pointed with attribute data-target and there is a parameter inside
which points to a modal by it's unique ID.
2. This is the modal html code and it is usually located after the closing of the anchor tag. It can be
placed anywhere probably the best would be to place it right before closing body tag but I have
added ti right after the anchor tag so you can better keep track of them since you will have some
amounts of videos on your site.
<div id="IDofTheModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
</div>
<div class="modal-body">
<iframe src="" width="500" height="281" frameborder="0" webkitallowfullscreen
mozallowfullscreen allowfullscreen></iframe>
</div>
</div>
</div>
</div>
3. Third and also vital for this is videos.js file located in the js folder. There is a snippet you need
to copy and paste inside and add / change Vimeo video embed code inside in order to put video in
the Bootstrap modal. Without this modal will open but blank as you have already seen.
$('body').on('show.bs.modal', '#IDofTheModal', function () {
$(this).find("iframe").attr("src", "https://player.vimeo.com/video/138159827?autoplay=1");
});
I have changed it to the match exactly the same color as those Ids from first two points. You will
see that those are the place you need to put it's depending code parts in order to change or add
videos to the site.

You might also like