Make video background responsive on mobile

Why don’t you use the full-width slider element (not the full-screen one) with your video as one slide.
you don’t have the need to have caption or buttons. and you can set up the video to loop. The only thing is that the controlelements can’t be completely hidden for vimeo videos. So the user could pause the video. After some time the control elements are hidden on default.
result see here: https://webers-testseite.de/video-tut/

you have no content over your video – so no reason to have here a color-section.

Hi,

I have an mp4 video on the colour section. It plays on the computer, iPad, Android phone but on the iPhone (any browser such as chrome, safari and firefox) it is a still image instead of video.

How can I fix that?

Thank you
Liam

Hi Victoria,

Thaks for your reply.

Here is the my website link: https://havazi.co.uk

I tried, but the issue remains.

Thank you. Liam

last try from my side here: you see that example page with your video: https://webers-testseite.de/video-tut/
Isn’t that the thing you like to optain?
You can not have full height and responsiveness. These are conditions that are mutually exclusive

If you have some content in front of the video – i can understand your request. But without the best way is to use the full-width video slider

see here responsiveness with color-section – but if content is determing the container height of the color section this will not work.
With all its settings like transparency and overlay color.
very important: the color-section has no padding no min height !!!
and the color-section gets the custom class: resp-container

https://webers-testseite.de/responsive-videobackground/

the code is set for that page only – you have to adapt this to your needs – maybe you omit the if-clause
this comes to functions.php of your child-theme:

function responsive_background_video(){
if ( is_page(32661)){
?>
<script>
(function($){
	$('body').on('DOMNodeInserted', function(){
		$('.resp-container iframe').addClass('resp-iframe');
		$('.resp-container').css({
		"position": "relative", 
		"overflow": "hidden" , 
		"padding-top": "56.25vw"
		});
		$('iframe.resp-iframe').css({
		"position": "relative", 
		"top": "0" , 
		"left": "0", 
		"width": "100vw" ,
		"height": "56.25vw" ,
		"border": "0",
		"-webkit-transform": "scale(1.4)",
		"-ms-transform": "scale(1.4)",
		"transform": "scale(1.4)"
		});
		$('.resp-container .av-section-color-overlay').css({
		"top": "-56.25vw" 
		});
	});	
})(jQuery);
</script>
<?php
}
}
add_action('wp_footer', 'responsive_background_video');

this is for 16:9 Videos only

by the way – very nice trick with DOMNodeInserted

Dear guenni007,

Thank you so much for your help and time. Look like you are most keen to help instead of Kries team.

I appreciate your help and time!

I am going to apply all your suggestions to solve the issue.

Thank you indeed:)