Home › Forums › Air HTML5 Template › Can’t get video to work in the lightbox
- This topic has 1 reply, 2 voices, and was last updated 3 years, 5 months ago by
SeaTheme.
Viewing 2 posts - 1 through 2 (of 2 total)
-
AuthorPosts
-
January 4, 2023 at 7:41 pm #28805
No matter what I do I can’t seem to get the poster frame for a video working within a lightbox. Everything else with the lightbox is working correctly, but the poster image above the hidden div of the video never shows up (despite the video being accessible by flipping through the open lightbox) Any thought as to why this is happening? Thanks!
<div class="single-col2-gallery-wrap blog-unit-gallery-wrap gallery-spacing-40 col-sm-12 col-md-7"> <div class="single-gallery-wrap-inn" data-style=""> <div class="list-layout lightbox-photoswipe" data-gap="60"> <div class="list-layout-col list-layout-col1 clearfix"> <div class="list-layout-col1-item list-layout-item" style=""> <div class="list-layout-inside"> <div class"mouse-over" data-lightbox="true"> <a class="lightbox-item" href="ntfe_1.jpg" data-size="1000x665" data-type="video"> <div class="hidden"> <div class="videoWrapper video-wrap video-post-wrap"> <iframe src="https://www.youtube.com/embed/lbMAGW6n2ic" width="auto" height="auto" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe> </div> </div> </a> </div> </div><!--End list-layout-inside--> </div><!--End list-layout-item--> </div> <div class="list-layout-col list-layout-col1 clearfix"> <div class="list-layout-col1-item list-layout-item" style=""> <div class="list-layout-inside"> <div class="single-image mouse-over" data-lightbox="true"> <a title="" class="lightbox-item" href="img/ntfe_1.jpg" data-size="1230x828"> <span class="ux-lazyload-wrap" style=" padding-top: 67.317073170732%;"> <img data-src="img/ntfe_1.jpg" width="820" height="552" class="list-layout-img gallery-images-img ux-lazyload-img lazy"> </span> </a> </div> </div><!--End list-layout-inside--> </div><!--End list-layout-item--> </div> <div class="list-layout-col list-layout-col1 clearfix"> <div class="list-layout-col1-item list-layout-item" style=""> <div class="list-layout-inside"> <div class="single-image mouse-over" data-lightbox="true"> <a title="" class="lightbox-item" href="img/ntfe_2.jpg" data-size="1230x828"> <span class="ux-lazyload-wrap" style=" padding-top: 67.317073170732%;"> <img data-src="img/ntfe_2.jpg" width="820" height="552" class="list-layout-img gallery-images-img ux-lazyload-img lazy"> </span> </a> </div> </div><!--End list-layout-inside--> </div><!--End list-layout-item--> </div> <div class="list-layout-col list-layout-col1 clearfix"> <div class="list-layout-col1-item list-layout-item" style=""> <div class="list-layout-inside"> <div class="single-image mouse-over" data-lightbox="true"> <a title="" class="lightbox-item" href="img/ntfe_3.jpg" data-size="1230x828"> <span class="ux-lazyload-wrap" style=" padding-top: 67.317073170732%;"> <img data-src="img/ntfe_3.jpg" width="820" height="552" class="list-layout-img gallery-images-img ux-lazyload-img lazy"> </span> </a> </div> </div><!--End list-layout-inside--> </div><!--End list-layout-item--> </div> <div class="list-layout-col list-layout-col1 clearfix"> <div class="list-layout-col1-item list-layout-item" style=""> <div class="list-layout-inside"> <div class="single-image mouse-over" data-lightbox="true"> <a title="" class="lightbox-item" href="img/ntfe_4.jpg" data-size="1230x828"> <span class="ux-lazyload-wrap" style=" padding-top: 67.317073170732%;"> <img data-src="img/ntfe_4.jpg" width="820" height="552" class="list-layout-img gallery-images-img ux-lazyload-img lazy"> </span> </a> </div> </div><!--End list-layout-inside--> </div><!--End list-layout-item--> </div> <div class="list-layout-col list-layout-col1 clearfix"> <div class="list-layout-col1-item list-layout-item" style=""> <div class="list-layout-inside"> <div class="single-image mouse-over" data-lightbox="true"> <a title="" class="lightbox-item" href="img/ntfe_5.jpg" data-size="1230x828"> <span class="ux-lazyload-wrap" style=" padding-top: 67.317073170732%;"> <img data-src="img/ntfe_5.jpg" width="820" height="552" class="list-layout-img gallery-images-img ux-lazyload-img lazy"> </span> </a> </div> </div><!--End list-layout-inside--> </div><!--End list-layout-item--> </div> <div class="list-layout-col list-layout-col1 clearfix"> <div class="list-layout-col1-item list-layout-item" style=""> <div class="list-layout-inside"> <div class="single-image mouse-over" data-lightbox="true"> <a title="" class="lightbox-item" href="img/ntfe_6.jpg" data-size="1230x828"> <span class="ux-lazyload-wrap" style=" padding-top: 67.317073170732%;"> <img data-src="img/ntfe_6.jpg" width="820" height="552" class="list-layout-img gallery-images-img ux-lazyload-img lazy"> </span> </a> </div> </div><!--End list-layout-inside--> </div><!--End list-layout-item--> </div><!--End list-layout-col --> </div><!--End list-layout--> </div><!--End single-gallery-wrap-inn--> </div>January 5, 2023 at 7:32 am #28810Hi,
Welcome to SeaTheme forum.Do you talk about the 1st item? It seems that the thumb is not setup, please try to update the 1st item as:
<div class="list-layout-col1-item list-layout-item" style=""> <div class="list-layout-inside"> <div class"mouse-over" data-lightbox="true"> <a class="lightbox-item" href="ntfe_1.jpg" data-size="1000x665" data-type="video"> <div class="hidden"> <div class="videoWrapper video-wrap video-post-wrap"> <iframe src="https://www.youtube.com/embed/lbMAGW6n2ic" width="auto" height="auto" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe> </div> </div> <span class="ux-lazyload-wrap" style=" padding-top: 67.317073170732%;"><img data-src="img/ntfe_1.jpg" width="820" height="552" class="list-layout-img gallery-images-img ux-lazyload-img lazy"></span> </a> </div> </div><!--End list-layout-inside--> </div><!--End list-layout-item-->
Regards!
SeaTheme – FAQs – WordPress Customization – Facebook -
AuthorPosts
WordPress Customization Service from 
Viewing 2 posts - 1 through 2 (of 2 total)
- You must be logged in to reply to this topic.