Adding video background for mobile on wordpress - html

Question

Wonder if you can help. I've been trying to add background mp4 to a WordPress site I am developing for a client. I've explained that its a bad idea due to data usage but he is insistent.
When I added the mp4, I quickly understood that by default this action isn't supported. However, there must be a work around. I have read the posts here and googled extensively.
so far, what I've come up with is using #media to resolve.
#media screen and (min-width: 600px) {
.header-video {
display: block !important;
}
}
However, this doesn't seem to work either. Other than creating a gif is there any other way?
Additional HTML Code: -- I am interested in the video loop tag with the MP4 in
<div id="main-content">
<article id="post-54" class="post-54 page type-page status-publish hentry">
<div class="entry-content">
<div id="et-boc" class="et-boc">
<div class="et_builder_inner_content et_pb_gutters3"><div class="et_pb_section et_pb_section_0 header-video et_pb_section_video et_pb_preload et_pb_with_background et_section_regular">
<span class="et_pb_section_video_bg">
<video loop="loop" autoplay playsinline muted >
<source type="video/mp4" src="http://fortuna-x.com/wp-content/uploads/2018/07/Deep-Network-Green-Blue.mp4" />
</video>
</span>
<div class="et_pb_row et_pb_row_0">
<div class="et_pb_column et_pb_column_1_3 et_pb_column_0 et_pb_css_mix_blend_mode_passthrough et_pb_column_empty">
</div> <!-- .et_pb_column --><div class="et_pb_column et_pb_column_2_3 et_pb_column_1 et_pb_css_mix_blend_mode_passthrough et-last-child et_pb_column_empty">
</div> <!-- .et_pb_column -->
</div> <!-- .et_pb_row --><div class="et_pb_row et_pb_row_1 et_pb_equal_columns et_pb_gutters150">
<div class="et_pb_column et_pb_column_1_3 et_pb_column_2 et_pb_css_mix_blend_mode_passthrough">

Answer 1

As of April, 2018. Chrome Autoplay policy has changed. In order to autoplay your videos on the site, you're media engagement score needs to be high. Examples from the docs.
Example 1: Every time a user visits VideoSubscriptionSite.com on their
laptop they watch a TV show or a movie. As their media engagement
score is high, autoplay is allowed.
Example 2: GlobalNewsSite.com has both text and video content. Most
users go to the site for text content and watch videos only
occasionally. Users' media engagement score is low, so autoplay
wouldn't be allowed if a user navigates directly from a social media
page or search.
Example 3: LocalNewsSite.com has both text and video content. Most
people enter the site through the homepage and then click on the news
articles. Autoplay on the news article pages would be allowed because
of user interaction with the domain. However, care should be taken to
make sure users aren't surprised by autoplaying content.
Example 4: MyMovieReviewBlog.com embeds an iframe with a movie trailer
to go along with their review. The user interacted with the domain to
get to the specific blog, so autoplay is allowed. However, the blog
needs to explicitly delegate that privilege to the iframe in order for
the content to autoplay.
To check weather you're media score is high enough you can check it like this.
var promise = document.querySelector('video').play();
if (promise !== undefined) {
promise.then(_ => {
// Autoplay started!
}).catch(error => {
// Autoplay was prevented.
// Show a "Play" button so that user can start playback.
});
}
So, if you get an error, you can show the play button. The user would then need to click on it to start the video.

Answer 2

Best way is u can use any wordpress plugin for adding video background for mobile...
like https://envato.com/blog/plugins-video-backgrounds/

Answer 3

I found a solution here:
https://wordpress.org/support/topic/video-settings-twenty-seventeen-theme/
After creating children them it’s enough to add these code lines to the file functions.php:
/*
* Change the minimum screen size to use the video header
*/
function twentyseventeenchild_video_size( $settings ) {
$settings[‘minWidth’] = 100;
$settings[‘minHeight’] = 100;
return $settings;
}
add_filter( ‘header_video_settings’, ‘twentyseventeenchild_video_size’ );
it works!