Video background on touch enabled device

Support
#1

I’m trying to avoid bloating up my site with sliders and really just need a simple solution within X / Cornerstone to have a section background show up on touch enabled devices. Currently, my organization has a fleet of touch screen laptops that will not display any video backgrounds in Chrome, the browser of choice for many.

What’s interesting is that setting a Section background to a video will not work, however I can place a V2 Video Element into a section and this will autoplay perfectly, even on mobile devices. The issue is though, is that I cannot place text on top of this element.

As an example, please check out my site: http://comdoc.wpengine.com

You’ll notice the first section works just fine (even on mobile devices) which is the V2 Video Element, but the second section will not autoplay on touch screen devices.

My goal would be to use the Cornerstone Elements to create a section with a video background that can text on top of the video and play on touch (not mobile!) devices.

Thank you for any guidance or assistance!

#2

Not sure if it helps or not, but when looking at the source in Chrome from touch screen device, this is where the video appears:

<script type="text/template"><div class="x-video-inner"><video class="x-mejs has-stack-styles" poster="http://comdoc.wpengine.com/wp-content/uploads/2018/06/2018-comdoc-website-home-page-video-720p-POSTER.jpg" preload="metadata" autoplay loop muted><source src="http://3wzd274a1zfo30r5zu3gu2vg.wpengine.netdna-cdn.com/wp-content/uploads/2018/06/2018-comdoc-website-home-page-video-720p-rev001.mp4" type="video/mp4"></video></div></script>

Is the script tag eliminating the video from being rendered?

#3

Hello There,

Thanks for writing in! I think you have sent us the incorrect url of the page in question. I am seeing a revolution slider with a video and the very first section is hidden for medium, large and extra large screens. There is no background video in the first section and only a background image.

Please double check.

#4

Sorry. I kind of gave up on trying to make it work after reading some of the other posts on the forum.

I’d be happy to put the content back up if you think there is a solution, but from everything I’ve gathered it doesn’t look possible without some editing of core Wordpress files (mediaelementjs).

#5

Actually, I’m going to need to see if you guys can help me with this. I have the examples back online at http://comdoc.wpengine.com and they explicitly labeled.

First - Slider Revolution > Works on all platforms, but is bulky, and all I need is a background video on desktop/laptops for sections

Second - Standard Cornerstone Section with Video Background > Works on all needed platforms, except touchscreens

Third - Cornerstone V2 Video Element > Play perfectly on all platforms including mobile!

I completely understand the reasoning, but as far as I can tell it’s your theme that is blocking videos set as backgrounds. While in theory this is good practice, there are an increasing amount of touch enabled devices that are not mobile devices and I would like to have the same experience for my audience on those.

Is there any way you can point in the right direction as to where I can disable this? Is it something with the mejs class?

#6

Hi ComDoc,

Unfortunately, it is not possible. The touch devices will not have a background video feature and will only have the Poster Image feature.

In this case, you will need to use the Revolution Slider to implement the feature you want.

Thank you for your understanding.

#7

Is there any headway or timeframe on adding a simple toggle feature to allow background videos to play on mobile/touch devices? It appears that a lot of browsers and becoming more lax on video content.

Alternatively, can you give me any direction on enabling this on my own?

#8

Regretfully, there’s no plans for this feature due to technical constraints. We also could not give any suggestions regarding this.

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.