video background template Zeever

Hi @sobora

Please try to add CSS to make the video background full screen. You can go to Appearance > Customize > Additional CSS. Then copy and paste the following code:

.guten-video-bg-wrapper > div {
    min-width: 768px!important;
}

Already added the css code and it continues the same way.

Black bar at the top and muted video.

What css code to solve?

Could you send me your site URL to check video size?

To ensure that the video plays in the background, it’s important to set it to autoplay since there will be no controls available for the user. However, for certain browsers such as Chrome, the video must be muted when set to autoplay. This will help prevent any unexpected disruptions for the user. See this article for more detail.

Link to background video: https://sobora.xyz

1 – See that in the mobile version the video is not displaying full responsively. See print attached.
2 – I need to enable the sound of this video.
3 – I need the controlle and youtube logo not to appear.

Here’s a print showing where I’m setting up the background video in gutenverse.

https://uploaddeimagens.com.br/imagens/snPRQ_4

Here is a print showing the background video without this responsive, without the audio and with the logo and control that appears when loading the video.

https://uploaddeimagens.com.br/imagens/u_vx8pQ

How do I solve this, I’ve tried everything, I need urgent help?

Tanks

It is hard to solve this since we embed the Youtube video. We can’t manipulate cross-domain embedded sites. We still search for any workarounds. We will let you know if there is a way.

For the controls, I’ve explained the limitations of using a muted video for rules. As for hiding the video information, there is currently no option available. This feature was open, but YouTube deprecated it many years ago.

Alternatively, you can upload your video into your media and embed it using a script. Here is the script. You can find the code snippet plugin to help you add it.

document.addEventListener('DOMContentLoaded', function() {
	var wrapper = document.querySelector('section.guten-16xlIO');
	var container = document.createElement('div');
	
	container.className = 'guten-video-background';
	container.innerHTML = `<div class="guten-video-bg-wrapper" style="z-index: 0; top: 0px; left: 0px; position: absolute; overflow: hidden; width: 100%; height: 100%;"><video width="100%" height="100%" autoplay playsinline muted style="object-fit: cover">
	  <source src="{{YOUR_VIDEO_URL}}" type="video/mp4">
	Your browser does not support the video tag.
	</video></div>`;
	
	wrapper.prepend(container);
});

Change {{YOUR_VIDEO_URL}} to your video URL. Please note, the video is still muted. It needs an interaction from the user to make it unmute. One tip, you could add a button there. We can add an event when the user clicks the button; the background video will be played.

It still doesn’t work. I already added the code with WPCODE. what should I do now?

Could you take a screenshot of how you added it? Please make sure the code is active, and the type is Javascript.

Prints

https://uploaddeimagens.com.br/imagens/4yjYIXo

https://uploaddeimagens.com.br/imagens/n2hmaV4

• This reply was modified 1 year, 10 months ago by sobora. Reason: updates prints

I said to upload the video to your media, not from Youtube. Please try it and let me know the result.

It’s been a while since we last heard from you.
To ensure that we can attend to other inquiries, I will be closing this topic for now.
However, if you still require assistance, please don’t hesitate to reach out.
We’re here to help.

Thank you.