search

fabiorino / crelly-slider

A free responsive slider for WordPress that supports layers. Add texts, images, videos and beautify them with transitions and animations.
MIT License
104 stars 36 forks source link

Video Issues #69

Open jonnie45 opened 4 years ago

jonnie45 commented 4 years ago

Hi

I am having issues with video - Crelly Slider 1.4.2 / Wordpress theme 2020 / Wordpress 5.3.4 / Chrome and Firefox / Ubuntu OS.

[ update I just upgraded WP to 5.4.2 and the issue is still there ]

When I embed a Youtube video it does not appear on the WP site page but it does appear in the Crelly preview window. I added dummy text markers around and near to the video in the preview window of that slide and these do appear in on the site page. I have other image and text based slides that are working fine.

The interesting thing is that the video does appear as soon as I resize the browser even by a very small amount but I have to do this when the video frame is visible so I wait until the slide appears and then I have to do a quick browser window resize.

I used firefox developer tools and inspected the video element whilst the slider was running, the interesting thing is that the width and height of the iframe for the video both start as zero - however as soon as I do my browser window resize hack the width and height both appear as sensible non-zero values, I can see this happening in the DOM.

I thought maybe it was something to do with the fact that I am using a parent div to contain the slider with width set to 35% rather than say 300px but a repeat with the width defined in pixels has the same problem.

It seems simply to be the case that the iframe does not know its size (well its zero) until the browser window is resized, once I do this the video appears correctly aligned and it will play.

The second issue is that the slider does not pause when I start the video even though I have requested this option when I set up the slide, the sound continues when the video slide has been replaced by the next slide.

I have downloaded the full source code and will attempt to debug but I will probably be slower than people who understand the code.

As I understand it the preferred way of submitting a bug is to "export" the slider? I will be happy to do this although I would ask for it to stay only with the developers of Crelly as it is being written for a charity organisation and they will not want it public at this stage.

I wonder if anyone has tested videos recently? I did look at the demo that comes in the github download but there is no video in those slides.

This issues do not dampen my enthusiasm for the slider it really is great - much more power to the developer compared with othe sliders, I love the fact that I can use HTML in a slide - really opens up the possibilities.

jonnie45 commented 4 years ago

Update: I added a Vimeo video to experiment. The behaviour now is that both the Youtube and Vimeo videos start off not displaying ( zero width height ) If I resize the browser window whilst one of the video slides is being displayed then that video appears, once it has appeared it stays visible next time it is displayed. The other video does not display. If I now resize the browser window whilst the 'other' video slide is being displayed then that video appears HOWEVER this has the effect of making the video previously made to appear disappear. In other words the resize-browser-window-whilst-video-slide-visible manual-hack only works for one video at a time - it has the effect of undoing the hack on the other slide.

jonnie45 commented 4 years ago

I started debugging I turned on debug mode so I could use the non-minified JS jquery.crellyslider.js

function scaleElement(element)

This is being called once for each of my two videos ( in iframes ) at start up. Adding alert messages shows that for both iframes ( both videos ) the following code fragment

` // Element doesn't contain text (like images or iframes) else {

            element.css({
                'width'  : getScaled(getItemData(element, 'width')),
                'height' : getScaled(getItemData(element, 'height')),
            });`

sets zero values for width and height.

I then added some crude code after this to set width 100% and height just a couple of hundred pixels - I will worry about aspect ratio later!

This got my videos appearing when the slider loads. The videos tend to disappear again when I resize the parent div - resize is all a bit erratic, sometimes it helps sometimes not. I will continue to pick my way through this - its a bit slow - hoping someone who knows the code will see these comments and add some wisdom.

I am trying to stick with it because this slider works exactly the way I want it to - absolutely love the graphic/text positioning and transition stuff, I can do exactly what i want, its just the video side of things that is not working out so far.

jonnie45 commented 4 years ago

Update: I changed my hack in scaleElement - the case for element "doesn't contain text...." ( ie the case that iframe will fall into ) I added the following code next ( to overwrite the authorised code in the case of an iframe ) so basically allowing the parent div to drive width and height.


        if( element.is('iframe'))
          {
          element.css({'width'  :100 + '%', 'height' :60 + '%'});
}

This works fine for both Youtube and Vimeo videos until I come to resize the screen, that is where the videos disappear again because their width and height get set to 0px.

I have been using alert() to debug because I am stepping through with Mozilla inspector watching the iframe element and its css values at every step.

By adding a lot of alerts through the entire sequence of steps in setResponsive() after manually resizing the window I watched as we stepped through expecting to see width go from 100% to 0px, my final alert was the very last statement in setResponsive ( I used local vars to remember both iframes from earlier in the function and then simply interogated them at the very end of the function ). It seems from both the alert print out of width/height AND what mozilla inspector is telling me that the iframes keep their 'hacked' width and height throughout the function.

So at this stage I know that with my hack the videos are displaying correctly when loaded but window resize results in them going back down to 0px width and height. I know that setResponsive() is being called in a listener which watches out for window resize. I know that at the very point of exit from setResponsive() the video iframes have my hacked percentage widths and heights.

So as another check I put an alert in the listener function that is added by addListeners() - just after the call to setResponsive I added an alert so that I could check width and height again in mozilla inspector. This confirmed that the values are still ok and set to my 'hack' percentage values.

But as soon as I press "continue" on the alert I see the width and height values go down to zero pixel in Mozilla inspector, something else is setting these values to zero after the listener has completed after a screen resize.

I have read stuff about problems with calculating widths when the parent element is set to display:none but if this was the problem then why are images and other things working out ok after a window resize?

Seems to me there are two explanations.

  1. Something in Creilly is resetting the width and height to zero after the listener has completed.
  2. The browser is interfering*

*Do note that this problem only occurs to videos that are not displayed in the slider at the time of resize, in otherwords when the slide is 'display:none', does the browser itself have a listener somewhere that says "whenever css has been altered on a display:none iframe we must set the width and height to zero px?"

In summary with my hacks in place, if I resize the window when one of my two video slides is actually showing then that video stays visible but the video that is not visible is reset to width and height zero pixel. If the problem is in Creilly or in the browser I think the code responsible will have a conditional based on whether the iframe or its parent slide is currently the active one.

Last time I checked the problem was the same on both chrome and mozilla.

jonnie45 commented 4 years ago

Update: Satisfactory hack

I have an improved hack.

At the very end of elementIn() just before the return statement I added...

  if( element.is('iframe'))
    {
    //BUG fix - HACK!!!! -  Iframes do not properly inherit from parents display:none
    //and so end up with 0px width and height. Solution for now is just to set iframe
    //size every time the slide comes into view.
    //100% and 56.25% pertain to youtube recommended iframe of 16:9 but of course this
    //does assume container is square!
    //But currently my Crelly slider is 1000 wide by 756 high.
    //16:9 in a 1000 wide scren implies a height of 562.5 ( 1000 * 9 / 16 )
    //so the actual percentage required is 562.5 / 756 which is 74.4%

    element.css({'width'  :100 + '%', 'height' :75 + '%'});
    }

As can be seen from the comments I took into account the parent div size and the desired 16:9 aspect ratio to calculate the percentage height and width.

The hack is an improvement simply because it calculates width and height when the iframe has been made visible in preparation for the slide-in transitions that elementIn is written to apply - waiting to set width and height at this point avoids issue of setting size of children of a 'display:none' iframe which I believe is the fundamental issue.

With this fix in place other issues reported in this account disappear.