Video slide outside gallery

ludwig.arcache's Avatar

ludwig.arcache

19 Mar, 2019 10:35 AM

Hello,

Today I tried to insert video in the gallery, it is working fine but if you move the gallery right or left, it will not get back into place. Please, try it on this link :

https://www.woodandgas.com/dimplex-ireland-electric-fireplace-square-p-237.html

Click on the Video tab, then drag the video left / right.

and I have another question, is it possible to make teh video fill the box ? full width and full height

Thanks :)

  1. Support Staff 1 Posted by Dmitry Semenov on 19 Mar, 2019 05:14 PM

    Dmitry Semenov's Avatar

    Hello,

    Could be related to http://help.dimsemenov.com/kb/royalslider-jquery-plugin-issues/slid...

    Try calling updateSliderSize method or trigger window resize event when the tab is switched and displayed.

    and I have another question, is it possible to make teh video fill the box ? full width and full height

    If you're adding a it via data-rsVideo attribute - video iframe size will always match visible part of its cover image.

    Not sure if I fully understand why do you use the slider to show a single video, consider adding <iframe> element when tab is switched.

  2. 2 Posted by ludwig.arcache on 20 Mar, 2019 02:08 PM

    ludwig.arcache's Avatar

    Hi,

    No it's not related to the problem discussed in the provided link.
    I tired to resize browser window, nothing changed.

    The content appear normally but cannot move slides left / right.

    Please give it a good try : https://www.woodandgas.com/dimplex-ireland-electric-fireplace-horizontal-p-610.html

    thanks

  3. Support Staff 3 Posted by Dmitry Semenov on 20 Mar, 2019 03:21 PM

    Dmitry Semenov's Avatar

    I was able to reproduce in Firefox, was testing in Chrome previously.

    Try adding disableCSS3inFF:false option to the slider with videos and let me know if it helps.

  4. 4 Posted by ludwig.arcache on 20 Mar, 2019 03:38 PM

    ludwig.arcache's Avatar

    it didn't work, but to make sure i did what you asked, here is the script:

    $321( '.royalSlider' ).royalSlider( {
    fullscreen: {
    enabled: true,
    nativeFS: true
    },
    disableCSS3inFF:false,
    controlNavigation: 'bullets',
    autoScaleSlider: true,
    autoScaleSliderWidth: 960,
    autoScaleSliderHeight: 960,
    loop: false,
    imageScaleMode: 'fit-if-smaller',
    navigateByClick: true,
    numImagesToPreload: 2,
    arrowsNav: true,
    arrowsNavAutoHide: false,
    imageScalePadding : false,
    arrowsNavHideOnTouch: true,
    keyboardNavEnabled: true,
    fadeinLoadedSlide: true,
    globalCaption: false,
    globalCaptionInside: false,
    thumbs: {
    appendSpan: true,
    firstMargin: true,
    paddingBottom: 4,
    fitInViewport: false
    },
    autoPlay: {
         enabled: true,
         pauseOnHover: true,
    delay: 3000
         }
    } );

  5. Support Staff 5 Posted by Dmitry Semenov on 20 Mar, 2019 05:47 PM

    Dmitry Semenov's Avatar

    I'm sorry, forgot to mention that this option is part of the video module since it is applied only to video-based slideshows. You should add it to video options, like so:

    video: {
      disableCSS3inFF: false
    },
    // other options...
    

    I also noticed that you're using two versions of jQuery on the page for some reason. And you're using slim version that does not include animations, which is why non-css animations in Firefox didn't work.

  6. 6 Posted by ludwig.arcache on 20 Mar, 2019 06:15 PM

    ludwig.arcache's Avatar

    Big Thanks !!! worked.

    Regarding the full width and height, any way to do it ?

  7. Support Staff 7 Posted by Dmitry Semenov on 20 Mar, 2019 06:55 PM

    Dmitry Semenov's Avatar

    Regarding the full width and height, any way to do it ?

    Please elaborate a bit more on this, or provide some screenshot/mockup of layout that you wish to achieve.

  8. 8 Posted by ludwig.arcache on 21 Mar, 2019 12:17 PM

    ludwig.arcache's Avatar

    As you can see in this link -> https://www.woodandgas.com/dimplex-ireland-electric-fireplace-horizontal-p-610.html

    There is 2 videos, forst video is full width and height, the 2nd is not.

    is there a way to make all videos look like the first ? full width and height, even if it crop.

    But dont waste too much time on this, just send me some hints in case you run before through similar case.

    Cheers :)

  9. Support Staff 9 Posted by Dmitry Semenov on 21 Mar, 2019 04:11 PM

    Dmitry Semenov's Avatar

    All you need is a larger cover image, or/and option imageScaleMode:'fill'.

  10. 10 Posted by ludwig.arcache on 05 Apr, 2019 10:16 AM

    ludwig.arcache's Avatar

    Hi,

    how can I allow fullscreen mode for Youtube videos ?
    I tried to add :

    video: {
      youTubeCode: '<iframe src="http://www.youtube.com/embed/%id%?rel=1&autoplay=1&showinfo=0" frameborder="0" allowfullscreen></iframe>'
    }

    But now the videos keep loading and do not start.

    Thanks for your help :)

  11. Support Staff 11 Posted by Dmitry Semenov on 05 Apr, 2019 12:30 PM

    Dmitry Semenov's Avatar

    Try with https:

    video: { 
      youTubeCode: '<iframe src="https://www.youtube.com/embed/%id%?rel=1&autoplay=1&showinfo=0" frameborder="0" allowfullscreen></iframe>' 
    }
    

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:

»

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac