Background video playsinline attribute

[deltagym]

This seams sort of obvious, but shouldn’t the autoplay, muted, loop options be optional when setting a video as background, e.g. for a row or top block?
Also, why isn’t the playsinline attribute there by default? The playsinline attribute allows for autoplaying of videos in Safari iOS. Having to add that attribute with something like this:
jQuery(window).load(function(){
var video = jQuery(’#my-video video.x-mejs’);
video.attr(‘playsinline’,’’);
});
is somewhat clumsy, unstable and slow. This attribute should definitely be there by default, and if these attributes are optional in the future this one should show as well.

Temporary fix (for anyone else looking to solve this issue):
For now I’ve just edited the source code, root/wp-content/plugins/cornerstone/includes/shortcodes/video-player.php -> line 141 add playsinline to video element. But as we all know, editing source code is not a longterm fix.

Please fix this by

1. adding playsinline as a default value (just like autoplay, muted and loop) for background videos
2. add checkboxes for above mentioned options when selecting a background video

Thank you!

[ruenel]

Hello @deltagym,

Thank you for your feedback. This is something we can add to our list of feature requests. This way it can be taken into consideration for future release update cycle.

Best Regards.

[deltagym]

I just now realized that there is another important option missing.
Multiple video sources, e.g. WebM, Ogg and MP4.
This is really a big one, since the more versions you can provide the better the compatibility. From what I can tell, when choosing a background video in cornerstone only allows for one source, this isn’t optimal.

See https://www.w3schools.com/tags/att_video_src.asp for reference regarding browser support on different file formats.

EDIT
For anyone reading this and having trouble with browser compatibility (i.e. video not playing in all browsers), using the cornerstone background layer, here is a temporary fix. NOTE! This fix may break when you update X-Theme and or Cornerstone since this is a “source code hack”. If it does you will have to re-take the same steps again, until APEX fixes this issue in their source code and adds the option of pointing to multiple video files for background videos.

TEMPORARY FIX
Add the code bellow in file; root/wp-content/plugins/cornerstone/includes/shortcodes/video-player.php -> before line 121 ($sources[] = '<source src="' . esc_url( $file ) . '" type="' . $mime['type'] . '">';):

if( preg_match( '#multi#', $file ) ){ $path_parts = pathinfo( $file ); $path = $path_parts['dirname'].'/'.$path_parts['filename']; $sources[] = '<source src="' . $path . '.webm" type="video/webm">'; $sources[] = '<source src="' . $path . '.mp4" type="video/mp4">'; $sources[] = '<source src="' . $path . '.ogv" type="video/ogv">'; break; }

then just make sure that you have all three files, with the same name (e.g. my-video.webm, my-video.mp4 & my-video.ogv) in the path location. You’ll have to name the file path with a file extension of .multi for this to work, e.g. /wp-content/uploads/my-video.multi.

[nabeel]

Hey @deltagym,

We certainly appreciate the feedback! I’ve added this to our list of feature requests so the developers will be made aware of it. All of these items are discussed with our team internally and prioritized based on the amount of interest a particular feature might receive.

Thank you sharing the temporary solution with us but please note it is not recommended to edit the core files because the customization will be lost on updating the Cornerstone.

Thanks!

[deltagym]

@Nabeel Hi,
Regarding editing of core files, I’m well aware of this, that is why I added the NOTE warning that this will or might break on any theme update
To find out the “real” interest you might need to have some surveys. A lot of people use templates for the specific reason that they aren’t comfortable programing things themselves. In turn, if a future isn’t there, that they want or need but don’t express it, that doesn’t necessarily mean they don’t want or need it.
In regards to background videos, the issues I’ve addressed in this post are more bugs (from a compatibility point of view) than feature request. The background video won’t autoplay on iOS devices without the “playsinline” attribute and having only one source file will also break it depending on browser. In other words, the way the background video is set up now is broken. Just food for thought

[friech]

Hi @deltagym,

Thank you for your feedback and to your quick fix, but the video background source field is actually capable of taking multiple video sources with different formats, just separate them with a pipe (|) character.

e.g.

http://techslides.com/demos/sample-videos/small.webm|http://techslides.com/demos/sample-videos/small.mp4|http://techslides.com/demos/sample-videos/small.ogv

Have a nice day,
Cheers!

[deltagym]

Alright, thank you for that! Maybe it would help others if there was an (i) icon above the source URL mentioning this?
That only leaves the “playsinline” attribute unsolved then

[friech]

Yup, a feature request for those are already added as well.

Have a nice day,
Cheers!