You are here

Video Lightbox Microtemplate

Our Content Management System can embed your Youtube and Vimeo content on your page. While there are multiple avenues toward inserting videos into your content, the micortemplae button offers the easiest method to embedding a video with a lightbox effect, where clicking the play button on the video adds a dark overlay to the background and centers the video in the middle of the browser.

Click the micortemplate button on the toolbar editor and select 'Video Popup Lightbox'. This will insert a placeholder image into your editing box. You'll need to make a few key edits to properly preview and play your video.

Compose a Preview Video Link Image

This will be what the user clicks to start the video. Use a suitable image (potentially a still from your video) for this, and apply a transparent play button to it in an image editor. Replace the existing placeholder image with your newly created image by right-clicking on the image, and selecting 'Image Properties'. Upload or select your new image as necessary. 

A woman celebrates at CSULB Commencement

Please use the dimensions posted on the placeholder image (1024x600 for full width images, 512 x 300 for half width)

Linking to your Video

Switch to source mode in your editor. You'll see the image you've added is being linking to a default video, looking something like this:

 	<a class="cbox-load video-popup-link" href="https://youtu.be/ccGHZz4QO6Q?rel=0&modestbranding=0"> 

For Youtube Embeds: Replace the href string with the youtube link, but do not delete:

?rel=0&modestbranding=0"

For Vimeo Embeds: Replace the entire href string witht he Vimeo link

Example

CSULB Students at Commencement