YouTube and Vimeo video display sizes in Dynamic mode

[dbrabyn]

Description

The YouTube and Vimeo videos display at a tiny size when loaded in Dynamic mode and full width with thumbnail plugin loaded (I don't want thumbnails).

Steps to reproduce

I'm loading css for lightgallery and the video and zoom plugins. I'm loading js for lightgallery and the hash, zoom, video plugins. Multiple galleries on the same page.

Expected result

Lightgallery should detect the video's dimension from the URL.

Actual result

https://joandiamond.art/#lg=5&slide=Possibilities-3

Zoom icon not responding either.

Additional context

WP site with wp-embed.min.js loading.

Apologies if this is deemed a how to request and not a bug report.

[dbrabyn]

If I don't display any subHtml in the previous slide (which contains an image), i.e. if that slide is div.lg-sub-html.lg-empty-html the subsequent one - with the video (div.lg-video-cont.lg-has-youtube) - is sized at 1280px x 720px.

I have div.lg-components placed at right: 0; and sized to 30vw. And div.lg-inner is sized to 70vw.

[sachinchoolur]

Hey @dbrabyn,

I think this is happening due to the custom CSS you've applied to the gallery. Demo without custom CSS - https://codepen.io/sachinchoolur/pen/gOWZEXZ

Also, if you want to apply custom CSS, I recommend you to use version 2.2.0-beta.4 as there is a slight HTML structural change - https://github.com/sachinchoolur/lightGallery/releases/tag/2.2.0-beta.4

I think it is safe to use version 2.2.0-beta.4 in production as well.

If your requirement is only to place captions on the right-hand side, I'll try to provide a demo

And finally, since you are using a square video, please change the videoMaxSize as well Docs - https://www.lightgalleryjs.com/docs/settings/#videoMaxSize

[dbrabyn]

A demo would be great, thanks.

It is indeed working fine for me on smaller screens, i.e. without the 75-25% side by side divs.

[sachinchoolur]

I'm making a few minor changes to make the customization easier. I'll provide a demo once that is done in one or two days. Hope that is fine

[sachinchoolur]

Hey @dbrabyn,

I've added an option to append caption to the .lg-outer div in version 2.2.0-beta.5. Now you can place the caption however you want Here is the demo - https://codepen.io/sachinchoolur/pen/zYweNJw

.lg-sub-html {
  position: fixed;
  right: 0;
  width: 30vw;
  background-color: rgba(255, 255, 255, 0.2);
  bottom: 0;
  top: 0;
  opacity: 1 !important;
}

.lg-outer {
  width: 70vw;
}

Let me know if you have any question

[dbrabyn]

Terrific. Thanks.

Only possible issue is the absence of breakpoints to enable it. Side by side won't cut it in most cases on narrow vertical screens. But I worked around that with css.

Mind if I ask why the Zoom icon has no effect here? The js and css are loaded, no js error. (wasn't working w version 2.2.0-beta.4 either)

dynamic: true, download: false, loop: false, allowMediaOverlap: false, hideBarsDelay: 1250, hideControlOnEnd: true, plugins: [lgZoom,lgHash,lgVideo], appendSubHtmlTo: ".lg-outer", galleryId: '...', youTubePlayerParams: {modestbranding: 1}, autoplayFirstVideo: false, gotoNextSlideOnVideoEnd: false, customSlideName: true, dynamicEl: [ { src: "...", srcset: "...", subHtml: "...", width: "...px", slideName: "..." }, ]

[sachinchoolur]

Zoom plugin doesn't zoom images beyond their actual size. But, this will be available in the near future as I already got few similar feature requests

[dbrabyn]

That explains it. Thanks.

Ideally that Zoom effect would load a separate larger version on demand.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.