On the Blocs website homepage, there is a PLAY VIDEO button that opens the intro video in a new frame/window with a vimeo embed. I am desperately trying to replicate this but have not been able to figure it out. I was able to create an image lightbox (using a png graphic I created that says WATCH TRAILER) that opens a video, but the lightbox itself is not like the video window on the Blocs website (which has a x in the upper right hand corner to close the window). Also, using the lightbox, I was not able to embed from vimeo or youtube. The Blocs website says it was built with Blocs, so I imagine it should be possible to display videos as the site does. I am working on this this weekend and would be so grateful if anybody had any advice/assistance. Thanks!
The Blocs website uses the HTML code area in page settings to embed a bootstrap modal with video embed into the footer code area. It also uses a HTML widget to create the play button plus some custom class work.
The Blocs website was built well before the lightbox feature was added, when it’s updated it will use the lightbox in frameless mode.
Thanks Norm. Is that code available? I like the way the video presents on the Blocs website now and would like to implement the same look and functionality for a youtube embed. I have already created an icon button and text link. Thanks again!
I don’t have it right now but take a loook at the Blocs home page source code and feel free to lift the source code for the modal. I believe it’s wrapped in comments that identify it near the bottom
Once I’m back in the office on Monday I’ll post the snippet 
Thanks Norm! We are excited to use Blocs and replicate the video display. Was wondering if you would be able to post the code. Thanks so much!
Remember the Blocs site is made with an older version of Blocs 2.0, I’ve been meaning to update it to be built with the most recent version 2.3/2.4 so some code may need to be tweeked.
Modal HTML (paste this in the footer code area for the page)
<!-- Video Modal - Added Using HTML Bloc -->
<div class="modal fade" id="reveal-video" tabindex="-1" role="dialog" aria-hidden="true">
<a class="close close-video pauseallvimeo" data-dismiss="modal" aria-hidden="true"><span class="ion ion-ios-close-outline"></span></a>
<div class="modal-dialog modal-video">
<div class="modal-content modal-black">
<div class="modal-body">
<div class="video-frame embed-responsive embed-responsive-16by9">
<iframe src="https://player.vimeo.com/video/163403597" class="embed-responsive-item" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</div>
<!-- Video Modal END -->
Modal CSS (add this at the header wrapped in a style tag or attached as an addition css file):
.modal {
text-align: center;
}
@media screen and (min-width: 769px) {
.modal:before {
display: inline-block;
vertical-align: middle;
content: " ";
height: 100%;
}
}
.modal-dialog {
display: inline-block;
vertical-align: middle;
}
.modal{
color:#848383;
}
.modal-backdrop {
opacity: 1!important;
}
.modal-video {
width: 1200px;
padding:0;
}
.modal-black{
background:#000000;
}
.video-frame iframe{
border: 0;
}
.close{
color: #fff;
position:absolute;
right:15px;
top:15px;
font-size: 50px;
font-weight: bold;
line-height: 1;
opacity: .5;
text-shadow:none;
z-index:10;
}
.close:hover{
opacity: 1;
font-size: 50px;
color: #fff;
}
I think the site also uses the ion icon set for the cross in the modal. You will also need to add a button via a HTML widget so you can add the data-toggle attribute for the modal.
Button HTML:
<a data-toggle="modal" href="#reveal-video" class="btn btn-lg btn-wire">Watch Video</a>
Hi!
I had the same question but your solution helps!
Another problem a i have faced - the video frame is too small. Is there any way to make it automatically start playing in full screen like yours?
Thanks
cupio, did you ever get an answer on this topic? I too am looking for that feature. Right now I’m having to link a small jpeg of a screen grab to link to the video window. Thanks.