Full-size Revolution Video Slider breaks on resize

[dio]

There seems to be a visual issue when a full-width video is playing via Revolution Slider and the browser window is resized. The slide content is a video and a .png is also uploaded as a thumbnail (assuming this is necessary for slow connections or to replace the video if it cannot be loaded).

Screenshots of what happens is attached (example with arrow occurs after a refresh). It looks like the thumbnail and the video are both displaying but not resizing together.

Attachments:

You must be logged in to access attached files.

[dio]

Update: It looks like the “thumbnail” I pointed to in the screenshot is the video that (I assume) is not resizing correctly with the window… Even after I refresh the page, the problem still occurs. When viewing on mobile, I don’t see the video at all (it must be off the screen or not loading on my phone).

Looking forward to any assistance with this issue.

[dio]

The issue can be replicated on this site: http://new-www.discuss.io/

[Nexus]

I see the issue. Pls leave a private reply here with a temp login to your site and I will take a look. Thanks!

[dio]

This reply has been marked as private.

[Nexus]

Hi,

I did check all possible settings and the video is enabled in mobile devices, so I find it strange that the video is not showing up in mobile. I also created a new slide and did add the video as a separate layer(instead of background), but no luck.

I would suggest you to buy a copy of Revolution Slider and raise a support request with the plugin author. I am pretty sure that Themepunch will take care of this issue, rather than we fiddling with the slider settings.

Let me know if you have any other ideas. Thanks!

[dio]

Hi,

Thank you for your troubleshooting steps. I was under the impression that purchasing your theme gave me support for a plugin that is included in your theme’s advertised functionality. I would not like to buy a license to Revolution Slider in addition to the cost of your theme.

Since you cannot fix it, are you able to work with the team at Revolution Slider to make sure your theme is not conflicting with their code? They claim to support video resizing and tend to blame theme developers for issues like this one (see: http://www.themepunch.com/faq/video-size-and-or-positioning-is-wrong-fitvids-fix/). I have already tried adding that custom javascript and have not had success in fixing this issue.

I would be happy to buy a license with Revolution Slider to resolve this issue as long as you can prove that your theme is not causing the problem.

Thanks.

[Nexus]

Sure we can check that. You can just temporarily switch to another theme and check weather this issue occurs even after deactivating our theme. That way we can be sure that this is a plugin issue. Pls let me know the result and I will talk to my developer about resolving it.

I will further check with Themepunch on how to resolve this issue and will get back to you ASAP.

[Nexus]

We got in touch with the plugin author regarding this and we got this response

“Hello,

mobiles block video autoplay by default and we agree that its absolutely not recommended to do so. An auto playing video could unwantedly use up a visitors mobile data volume.

Here is a FAQ summing the topic up: http://www.themepunch.com/faq/video-not-showing-up-on-mobile/

Regards, ThemePunch”

So according to the FAQ, “Video content layer” is the only way to get the videos working in the mobile Phones

Thanks!

[dio]

Hi,

This has nothing to do with the video not playing on mobile. Revolution slider is right, the video should not play on mobile… but that is not the problem we are trying to fix here.

Slider videos are resizing incorrectly due to some sort of stylesheet override in you theme. I tested embedding the video within the slider as well as using the slider within the body of the page instead of in the page settings. Either way, the video seems to resize to fit the width when it should be trying to fit the height of the browser. I have reconfigured all of the settings in the slider UI and have not found a way to fix this issue.

Here is a video of this issue occurring in your theme and not in the other themes I have installed: https://drive.google.com/file/d/0Bz3_ufw2DHLANHN2Z2ZZUVRBdDg/view

I will try hacking away at the custom css to make this work but I would appreciate if you could investigate your code for a width/height override that may be causing this resizing issues for videos in Revolution Slider.

Thanks.

[Nexus]

Ok. Sorry for all the trouble. I was focusing on video not showing up in mobile instead of the actual problem you mentioned.

The actual culprit was the style that we used in our theme for the video element, which was affecting the rev slider video’s height. So I went ahead and put some custom css to fix the issue. Pls take a look and let me know if everything’s working fine on your end.

Thanks!

[dio]

That seemed to fix it! Here’s the new code in the custom.css for anybody else that’s interested:
.rev_slider video {
width: 100%!important;
height: 100%!important;
top: 0 !important;
}

[Author]

Posts