Jump to content

[Module] Youtube Video Slider With Lightbox


MEG Venture
 Share

Recommended Posts

This is a responsive youtube video slider and carousel that opens up the videos in a lightbox.

 

This module will help the merchants to display Youtube product presentation videos on your website in an organized and elegant fashion. It is easy to use as you don't need to upload videos or generate thumbnails. You only need to know the Youtube video address. Then the thumbnail will be automatically generated from Youtube.


Customers are not redirected to the Youtube website. Instead, the videos are displayed in lightbox with full screen option.

Researches show that video supported product descriptions encourage customers to buy the products and establish confidence.

 

Features:

  • One page configuration.
  • Only the Youtube video address is required. Nothing else.
  • Thumbnails are generated automatically.
  • Youtube videos are opened in lightbox.
  • Video titles can be added.
  • Responsive. Mobile compatible with finger swipe support.
  • Slider is configurable including autoplay, sliding time interval, etc.
  • Footer, homepage and top positions are available.

Product Page: https://www.megventure.com/prestashop-modules/46-youtube-video-slider-with-lightbox.html

DEMO:

Backoffice: https://test3.megventure.com/admin123

Front Office: https://test3.megventure.com/

[email protected]

demodemo

youtube-video-slider-with-lightbox.jpg

youtube-video-slider-with-lightbox.jpg

youtube-video-slider-with-lightbox.jpg

youtube-video-slider-with-lightbox.jpg

Edited by MEG Venture
Demo website update (see edit history)

Share this post


Link to post
Share on other sites

  • 3 months later...

A customer asked the below questions:

1. How can I change the size of the miniatures showing on home?
2. How can I change the size of the lighbox?

Answer:

To change the dimensions of iframe/lightbox open the below file.

/modules/youtubeslider/views/js/youtube/jquery.youtubevideogallery.js

Comment the below two lines:

innerWidth:($(".row").width() > 450) ? 425 : $(".row").width() - 100,
innerHeight: ($(".row").width() > 450) ? 344 : ($(".row").width() - 100)*0.8,

Uncomment the below two lines and assign the width/height of your desire. Then clear cache to see the changes.

 innerHeight:344,
 innerWidth:425,

In order to change the width of thumbnails, modify the below line.

thumbWidth:150,

Do not forget to change the number of thumbnails in a row from the module configuration page, to fit the size of thumbnails, if you increase the width.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More