Skip to content

Instantly share code, notes, and snippets.

@jdelia
Last active October 14, 2017 03:11
Show Gist options
  • Save jdelia/8966e2cc3ca22655ba1dab616c44b012 to your computer and use it in GitHub Desktop.
Save jdelia/8966e2cc3ca22655ba1dab616c44b012 to your computer and use it in GitHub Desktop.
Code snippets for a video lightbox with image thumbnail.
.lightbox-video {
margin: auto;
padding: 5% 10%;
}
.lightbox-video a {
display: block;
position: relative;
overflow: hidden;
cursor: pointer;
}
.lightbox-video a:after {
content: "";
position: absolute;
display: inline-block;
vertical-align: top;
clip: inherit;
background: url("images/icon-video-play.svg") no-repeat center center;
background-size: cover;
/*left: 90%;
top: 78%;*/
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
stroke: none;
height: 80px;
width: 80px;
z-index: 100;
opacity: 0.4;
transition: opacity .3s;
}
@media only screen and (min-width: 800px) {
.lightbox-video a:after {
height: 120px;
width: 120px;
}
}
.lightbox-video [data-featherlight] img {
cursor: pointer;
position: relative;
}
.lightbox-video:hover a:after {
opacity: 0.8;
}
;
(function($) {
'use strict';
var imageLinks = [
'.lightbox-video a.widget_sp_image-image-link'
];
$.each(imageLinks, function(index, value) {
$(value).attr({
'data-featherlight': 'iframe',
'data-featherlight-iframe-width': '960',
'data-featherlight-iframe-height': '540'
});
});
})(jQuery);
@jdelia
Copy link
Author

jdelia commented Oct 2, 2017

For using within a widget, depending on your theme, you will need to add or include the contents of global.js script.
Install Image Widget plugin: https://wordpress.org/plugins/image-widget/
Install CSS Widget Classes plugin: https://wordpress.org/plugins/widget-css-classes/
For both widget and using within content areas, you will need the WP Featherlight plugin. https://wordpress.org/plugins/wp-featherlight/
Include an image of the play icon in your images folder. One is provided here.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment