HubSpot CMS

Video Gallary with popup

Video gallery really enhances the rating of your site when people search for related topics and videos whether on Youtube and Vimeo or search engines in general. Getting your Youtube, Vimeo extension working is straightforward with a few simple steps required to build these great video resources on your Hubspot site. The process of creating a video gallery only takes a few minutes and created gallery can be displayed on any page or post of HubSpot shortcode and no matter how small your device screens are it will automatically adjust to fit on that screens and display perfectly. With the drag and drop image position feature, you can arrange the order of the image that has to be displayed in your gallery.

Created by: BitCot

Tags: Galleries, Video

Unverified
?

After receiving a minimum of 25 recommendations, an entry earns the "Community Approved" badge.

Please keep in mind, all entries are community created and may not be fully supported by HubSpot.

5 Recommendations

View on:

GitHub

HTML + HUBL
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js" ></script>
<div class="gallery">
  <div class="vd__Wrap">
    <div class="vd__Section">
      <div class="popup-gallery">  
        {% for item in module.youtube_video_gallary %}
          {% if item.video_thumbnail_image.src %}
            <div class="col__{{ module.select_column_layout }}V">
              <div class="video_Cover">
                <div class="video_thumb">
                  <img src="{{ item.video_thumbnail_image.src }}" alt="{{ item.video_thumbnail_image.alt }}" /> 
                </div>
                <a href="{{ item.youtube_video_url.href }}" class="video play_icn" video-url="{{ item.youtube_video_url.href }}" style="cursor: pointer;"> 
                  <img src="{{ module.play_icon_image.src }}"> 
                </a> 
              </div>
            </div>
          {% endif %}
        {% endfor %}
      </div>
    </div>              
  </div>
</div>

          
        
CSS
          
            .vd__Wrap {
	display: block;
	width: 100%;
	max-width: 1260px;
	margin: 30px auto;
}
.vd__Section {
	display: inline-block;
	text-align: center;
	width: 100%;
	margin: 20px 0;
}
.video_Cover {
	display: inline-block;
	width: 100%;
	box-shadow: 0px 0px 20px 0px rgba(12, 11, 11, 0.5);
	-moz-box-shadow: 0px 0px 20px 0px rgba(12, 11, 11, 0.5);
	-webkit-box-shadow: 0px 0px 20px 0px rgba(12, 11, 11, 0.5);
	background-position: right bottom;
	position: relative;
}
.video_thumb img {
	width: 100%;
}
.video_Cover .play_icn.video {
	width: 66px;
	height: 48px;
	text-align: center;
	display: inline-block;
	background: #007AAC;
	position: absolute;
	left: 0;
	bottom: 0;
}
.video_Cover .play_icn.video img {
	vertical-align: middle;
	border-style: none;
	margin-top: 12px;
	width: 20px;
}
.play_icn:hover {
	background:#202125 !important;
}
.col__1V, .col__2V, .col__3V {
	display: inline-block;
	width: 45%;
	margin: 15px 2%;
}
.col__1V {
	width: 50%;
}
.col__3V {
	width: 29%;
}
@media only screen and (max-width: 1023px) {
.col__1V {
	width: 70%;
}
.col__3V {
	width: 45%;
}	
}
@media only screen and (max-width: 767px) {
.col__2V, .col__3V {
	width: 70%;
}	
}
@media only screen and (max-width: 600px) {
.col__1V, .col__2V, .col__3V {
	width: 100%;
	margin: 15px 0;
}	
.vd__Wrap {
	width: 94%;
}
}
          
        
JS
          
            jQuery(document).ready(function() {    	
  setTimeout(function() {
    jQuery('.popup-gallery').magnificPopup({
    		delegate: 'a',
    		type: 'image',
        callbacks: {
          elementParse: function(item) {
            // Function will fire for each target element
            // "item.el" is a target DOM element (if present)
            // "item.src" is a source that you may modify
            console.log(item.el.context.classList[0]);
            if(item.el.context.classList[0] == 'video') {
              item.type = 'iframe',
              item.iframe = {
                 patterns: {
                   youtube: {
                     index: 'youtube.com/', // String that detects type of video (in this case YouTube). Simply via url.indexOf(index).

                     id: 'v=', // String that splits URL in a two parts, second part should be %id%
                      // Or null - full URL will be returned
                      // Or a function that should return %id%, for example:
                      // id: function(url) { return 'parsed id'; } 

                     src: '//www.youtube.com/embed/%id%?autoplay=1&rel=0', // URL that will be set as a source for iframe. 
                   },
                   vimeo: {
                     index: 'vimeo.com/',
                     id: '/',
                     src: '//player.vimeo.com/video/%id%?autoplay=1'
                   },
                   gmaps: {
                     index: '//maps.google.',
                     src: '%id%&output=embed'
                   }
                 }
              }
            } else {
               item.type = 'image',
               item.tLoading = 'Loading image #%curr%...',
               item.mainClass = 'mfp-img-mobile',
               item.image = {
                 tError: '<a href="%url%">The image #%curr%</a> could not be loaded.'
               }
            }

          }
        },
    		gallery: {
    			enabled: true,
    			navigateByImgClick: true,
    			preload: [0,1] // Will preload 0 - before current, and 1 after the current image
    		},
        
    	});
  }, 1200 );
});
          
        
Have Questions?

Ask technical questions in Slack.

HubSpot Developer Slack

Not a member yet? - join here
READ ME (VIEW IN GITHUB)

HubSpot

Responsive Video Gallary


Description:

Video gallery really enhances the rating of your site when people search for related topics and videos whether on Youtube and Vimeo or search engines in general. Getting your Youtube, Vimeo extension working is straightforward with a few simple steps required to build these great video resources on your Hubspot site. The process of creating a video gallery only takes a few minutes and created gallery can be displayed on any page or post of HubSpot shortcode and no matter how small your device screens are it will automatically adjust to fit on that screens and display perfectly. With the drag and drop image position feature, you can arrange the order of the image that has to be displayed in your gallery.

Template Usage code:

{% module "module_158037018986363" path="/Video gallery with popup", label="Video gallery with popup" %}

Features:

  • Responsive and touch-friendly.
  • CSS powered animations.
  • Keyboard / Touch swipe navigation.
  • Custom image aspect ratio.
  • Set Column Layouts
  • LightBox Pop-up Style
  • video Order Setting Like Ascending, Descending & Shuffle
  • Easy To Implement Anywhere Into Hubspot
  • Easily Customization
  • Multi-Language supporting (English, English-UK, English-Australia, English-US, Greek, German, Danish-denmark)

Demo

  • http://dev-dev-7029090-7029090.hs-sites.com/video-gallery

Support:

If you find any issue or need help, please ask us. We are active in https://help.hubspot.com/ Support Forum.

 
5 Recommendations

BitCot

www.bitcot.com

BitCot delivers digital products for all businesses by building mobile apps, Web tools, SaaS platforms to drive digital growth for success.

View BitCot’s Gallery (5 Entries)

Other Open Source Projects

Browse all other open source projects

CrankShaft Framework

A modern framework for accelerating build times on the HubSpot CMS. Based on a modified Bootstrap 4 framework.

Lead developers: Jon McLaren

Developer Chrome Extension

Chrome/Chromium extension for HubSpot CMS Developers that adds a developer menu, dark theme and useful shortcuts to commonly used HubSpot query parameters, resources, and tools for making HubSpot Development easier and more enjoyable.

Lead developers: Jon McLaren , William Spiro , Gonzalo Torreras

VS Code HubL Language Extension

This extension enables super fast local development of CMS pages, and is a great compliment to using the new local HubL server. It contains comprehensive HubL tag, function, filter and expression test auto-complete snippets, as well as their documentation.

Lead developers: William Spiro

Not coding on HubSpot CMS yet?

We invite you to explore why thousands of developers LOVE coding with HubSpot!

Contribute
Made with  by community members: InboundLabs.co