Embed video to 3rd party lightbox gallery without fullscreen

  • Resolved Ivan

    (@ivanphang)


    6 years, 8 months ago

    Hi,

    Thank you for sharing your wonderful video plugin until now.
    I’m a newbie when it comes to web development, my apologies if I’m asking something obvious later.

    OS: Windows 10 64 bit
    Browser: Chrome Version 67.0.3396.99 (Official Build) (64-bit)

    The question is I’m trying to href link some videos into a 3rd party gallery with lightbox feature. However I can’t find a way yet to href the embedded video (using [KGVID] tag) to open without it being full screen width right after clicking the image link. If I href the same video using “WordPress Default” setting & not “Single Video”, it’ll just open up as what I expect. So how can I href KGVID video without it opening as full screen width? As far as I know, the 3rd party gallery plugin has no setting to cause lightbox videos open up in full screen width. The video resolution used here is 1280 x 720px, with 2 attached lower res videos for quality selection.

    I’ve created a test gallery to show what I meant here https://luciddream-animation.com/test-gallery/ The left video shows a video that I’ve href using [KGVID] tag & it’ll display full screen width on click, the second video shows the same video in native wordpress video player that opens up as expected.

    For your reference if you don’t mind, I’ve included below the html codes used in the 3rd party gallery plugin to attach the 2 test videos. Thank you in advance.

    Regards,
    Ivan

    HTML CODE FOR 1ST VIDEO HREF USING [KGVID](LEFT VIDEO)

    <div class="amazingcarousel-item-container" style="position: relative;margin: 0px 4px">
<div class="amazingcarousel-image" style="height: 342px;overflow: hidden">
<a href="https://luciddream-animation.com/?attachment_id=1375&kgvid_video_embed[enable]=true" title="href to embedded video using KGVID tag" class="wondercarousellightbox wondercarousellightbox-7">
<div class="amazingcarousel-image-fix-wrapper" style="width:100%;height:100%;overflow:hidden">
<img src="https://luciddream-animation.com/wp-content/uploads/3D/HP_Printer/HP_Printer_dvdTest_Cover.jpg" alt="href to embedded video using KGVID tag" style="width: auto;height: 100%;max-width: none;max-height: 100%;margin-top: 0px;margin-left: -133px"></div></a>
<div class="amazingcarousel-play-video"></div></div>
<div class="amazingcarousel-hover" style="display: none">
<div class="amazingcarousel-title">href to embedded video using KGVID tag</div>
<div class="amazingcarousel-description"></div>
</div></div>

    HTML CODE FOR 2ND VIDEO HREF USING NATIVE WORDPRESS PLAYER(RIGHT VIDEO)

    <div class="amazingcarousel-item-container" style="position: relative;margin: 0px 4px">
<div class="amazingcarousel-image" style="height: 342px;overflow: hidden">
<a href="https://luciddream-animation.com/wp-content/uploads/3D/HP_Printer/videos/HP_Printer_dvdTest_web.mp4" title="href to the same video using native wordpress video url" class="wondercarousellightbox wondercarousellightbox-7">
<div class="amazingcarousel-image-fix-wrapper" style="width:100%;height:100%;overflow:hidden">
<img src="https://luciddream-animation.com/wp-content/uploads/3D/HP_Printer/HP_Printer_dvdTest_Cover.jpg" alt="href to the same video using native wordpress video url" style="width: auto;height: 100%;max-width: none;max-height: 100%;margin-top: 0px;margin-left: -133px"></div></a>
<div class="amazingcarousel-play-video"></div></div>
<div class="amazingcarousel-hover" style="display: none">
<div class="amazingcarousel-title">href to the same video using native wordpress video url</div>
<div class="amazingcarousel-description"></div>
</div></div>
    • This topic was modified 6 years, 8 months ago by Ivan.
    • This topic was modified 6 years, 8 months ago by Ivan.
    • This topic was modified 6 years, 8 months ago by Ivan.

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author Kyle Gilman

    (@kylegilman)

    I don’t know anything about the lightbox plugin you’re using, but when you use the clean URL in your 2nd example, it’s not building the native WordPress player, it looks like it’s the lightbox plugin’s own player. So it naturally works better when using just one plugin. The lightbox plugin is automatically resizing the video window to 960×540, but when you use my plugin it doesn’t know what the content is so it just makes it as big as possible. I think you’ll have to find a way to tell the lightbox plugin to make the window smaller and I don’t know how to do that.

    Thread Starter Ivan

    (@ivanphang)

    No problem, thanks for the advice.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Embed video to 3rd party lightbox gallery without fullscreen’ is closed to new replies.