CODEWITHSUNDEEP
htmlcsswordpress
Martin Graham
Martin Graham

Reputation: 33

Adding video background for mobile on wordpress

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">

Upvotes: 2

Views: 6305

Answers (3)

Mahendra Pratap
Mahendra Pratap

Reputation: 3623

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!

Upvotes: 1

Shahid Mulani
Shahid Mulani

Reputation: 181

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

Upvotes: 0

Gregor Ojstersek
Gregor Ojstersek

Reputation: 1379

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.

Upvotes: 1

Related Questions