Canvas Support

Strange behavior on modal iframe infinite scroll

6 replies · opened Aug 9, 2018

Kkarl122Aug 9, 2018

Hi,

Thank you for your answers regarding my previous questions. In my previous posts, I neglected to compliment you on this amazing work, this is one of the best I have seen so far. Great job.

Now, I have another small issue to overcome, if you can please help me to solve this it would greatly be appreciated.

I have created a video gallery using the modal to open the lightbox. This is in an iframe to run youtube videos. Since we have too many images to load, I divided them into two pages, using the infinite scroll. All good after a bit of searching to initialize the lightbox, but finally, it works.
However, on the initial page, the lightbox video is a certain size and responsive, but on the second loaded page under it, when the lightbox opens, the video is smaller and not responsive. At least not on the desktop when I resized the browser, haven't checked on mobile yet, but I suspect it is not.
The second page is exactly the same coding as the first one as it was one page initially before I cut it in half.
At this point, I am stuck for solutions, no idea where to go from here. If you could please take a look to see what is going on, it would be a great help. I am including the URL here: http://30degresproductions.com/video.html.
Thank you in advance.

Best
Karl

Kkarl122Aug 14, 2018

Hi,

Could you please let me know if you can help me with this? I have posted the question four days ago, although I realize you are busy to sort out all the issues with others as well.
Thank you.

Karl

Kkarl122Aug 16, 2018

Hi,

What happened to support, I am waiting for over five days to hear from you, at least for a response. I paid for the product and the license is guaranteeing this:
Availability of the author to answer questions
Get assistance with reported bugs and issues
Help with included 3rd party assets

I think my problem falls into the first two paragraphs.

Please answer my question as soon as possible, it's been long time since I posted the issue. I will post this as private reply, so this can stay between us for now, but I am counting on your quick reply to be able to move on.
Thank you very much.

Karl

SSemicolon WebSTAFFAug 16, 2018

Hello,

Thanks for your Continued Patience with us!

We have checked out your Website and the issue appears to be with the Functionality of the Lightbox you have used. We have checked out the codes and you appear to be using the data-lightbox="inline" Functionality to display the Youtube Videos, however, this can be easily achieved by simply using the data-lightbox="iframe" Functionality. Example: 

[
	...
](https://www.youtube.com/watch?v=G_G8SdXktHg)

Just make sure that the Youtube Link is in the Proper format as in the code above. So simply setting up your Video Links as above will make your Lightbox Gallery work uniformly.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Kkarl122Aug 17, 2018

Hi,

Thank you very much, it works, however, is it possible to use embedded videos, because in this format I can not block suggested videos at the end of the video.
Also, there is the scrollbar in the lightbox, actually a lot of space above and below to scroll, can we get rid of that?

Thank you.
Karl

Kkarl122Aug 17, 2018

I forgot to mention in my previous email. what is causing the first-page video-only.html to work properly with this code and not the loaded video-only2.html:

<div class="col_one_third"><a href="#myModal1" data-lightbox="inline">
attachment
<div class="overlay"><div class="overlay-wrap"><i class="fab fa-youtube" style="color: #01a6e7;"></i></div></div>

<div class="modal1 mfp-hide" id="myModal1">
<div class="block divcenter" style="max-width: 900px;">
<div class="center clearfix" style="padding: 30px;">

<iframe width="560" height="315" src="https://www.youtube.com/embed/jUai_Hjtb54?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
<p class="lead nobottommargin topmargin-sm"></p>
</div>
</div> </div> </div>

As you can see, the lightbox is set to inline, yet it is responsive and opening the proper size. What is causing this?
Thank you very much.

Best
Karl

SSemicolon WebSTAFFAug 21, 2018

Hello,

We are not entirely sure, why this is happening but it is definitely due to the Infinity Scroll Plugin working together with the Resize Iframe Video Plugin. And since the Video is hidden, it appears to be getting smaller due the Video Resizing Plugin.

Meanwhile, it is possible to disable the video suggestions at the end of the video. Simply find the following code in the js/plugins.js File: 

//www.youtube.com/embed/%id%?autoplay=1

and replace it with: 

//www.youtube.com/embed/%id%?autoplay=1&rel=0

This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard