Forums

video lightbox

Permalink
Hi I'm using 5.7 & fundamental theme.

How do I get/build/buy a nice video player like the one on the front concrete page
-http://www.concrete5.org/
- or thathttps://spartez.com/products/agile-cards-for-jira...
- or that onehttps://www.atlassian.com/software/jira...

I can see google adds showing on the Youtube video - how do I remove them?
extensi
 
MrKDilkington replied on at Permalink Reply
MrKDilkington
Hi extensi,

The concrete5.org home page uses two built-in assets to create the video lightbox: jQuery and Magnific Popup. The same approach and assets can be used to recreate the other two examples you linked to.

Here is a very basic example of how to you can use the HTML block and a custom template to create a video lightbox.
http://documentation.concrete5.org/editors/in-page-editing/block-ar...

The custom template:
- application\blocks\html\templates\lightbox.php
<?php defined('C5_EXECUTE') or die('Access Denied.');
View::getInstance()->requireAsset('javascript', 'jquery');
View::getInstance()->requireAsset('javascript', 'core/lightbox/launcher');
View::getInstance()->requireAsset('javascript', 'core/lightbox');
View::getInstance()->requireAsset('css', 'core/lightbox');
?>
<?php echo $content; ?>
<script>
$(document).ready(function() {
    $('.popup-youtube').magnificPopup({
      disableOn: 700,
      type: 'iframe',
      mainClass: 'mfp-fade',
      removalDelay: 160,
      preloader: false,
Viewing 15 lines of 19 lines. View entire code block.

The code to enter into the HTML block:
<a href="https://www.youtube.com/watch?v=12vG6D8g2gE" target="_blank" class="popup-youtube">
   <img src="https://i.imgur.com/Ds7vEPK.jpg" class="video-screenshot" alt="video screenshot">
</a>

The link will be the video you want to be in the lightbox. The image would ideally be a screenshot of the video with some sort of hover indicator that it was clickable.

This approach requires manually editing code and does not allow for using the File Manager to add images. If you want a full block approach, that can be done.

Regarding advertisements, I don't believe there is a Google approved method of removing them.