How to add video background in place of header image

saguaros · Sep 21, 2018

infocubic

You can share the admin + FTP account so we can take a look.

infocubic · Sep 21, 2018

saguaros

Hello Saguaros,

I would like to do the changes myself since this is a test site I put on. Can you suggest?

aman204 · Sep 21, 2018

infocubic Hi

As asked by @saguaros, You may kindly share the site creditionals so as to enable us to review, examine the relative issue closely while trying to replicate.

Also, To troubleshoot, Can you try to embed another youtube video to see if the same renders fine?

Joshua-M · Sep 21, 2018

infocubic
Try to add the following custom css code, adjust height value to your needs and it should be fine:

#video-bg {
	z-index: 0;
}

#gk-header-nav h1 {
	position: relative;
}

.imageBg #gk-head {
	height: 600px;
}

Cheers
Joshua

infocubic · Sep 22, 2018

Joshua-M

This works fine now, I need the following issues to be fixed. Please help....

I want to put the video in loop
On mouse over I need to remove play/pause option and YouTube icon at the bottom right side
The header widget content is not visible
{<h1>Syaxe</h1>
<h2>the edge matters</h2>
<form class="gk-form">
<div><input type="email" placeholder="Email address ..." /> <input type="submit" value="Sign up!" /></div>
</form>
<p><a class="gk-video-link thickbox" href="https://www.youtube.com/watch?v=jtCjH0eCteM">Watch the Video</a></p>}

Joshua-M · Sep 22, 2018

infocubic
Hi,

Regarding your issues:
1. Please check the answers here: https://stackoverflow.com/questions/25779966/youtube-iframe-loop-doesnt-work (instead of youtube iframe, you can also use own video from your server - video tag)
2. This issue is connected with youtube iframe.. I think it will be easier to use own video file. (and i'm not sure if it's legal to remove youtube logo, please check the discussion here)
3. Try to add this css:

#gk-head .box {
    position: relative;
    z-index: 3333333;
}

infocubic · Sep 22, 2018

Joshua-M

I have uploaded the video and added the code as suggested, it is not working please check.....

The code I have added is
{ <header id="gk-head">

<video autoplay loop poster="/wp-content/themes/Simplicity/images/header.jpg" id="bg-video">
<source src="/wp-content/themes/Simplicity/video/Pars.webm" type="video/webm">
<source src="wp-content/themes/Simplicity/video/Pars.mp4" type="video/mp4">

</video>
}

aman204 · Sep 22, 2018

infocubic I have uploaded the video and added the code as suggested, it is not working

Try change z-index value here :

#video-bg {
    height: 100%;
    position: absolute;
    width: 100%;
    z-index: -1;
}

to

#video-bg {
    height: 100%;
    position: absolute;
    width: 100%;
    z-index: 0;
}

infocubic · Sep 24, 2018

I have added this code to #bg-video , it is working on IE and Firefox browsers with sound and it is not working in chrome and safari browsers. Can you please let me know how to mute the sound? then it may work on chrome and safari.

The other thing is on mobile device video is not responsive. Image and video both displays....

aman204 · Sep 24, 2018

infocubic Can you please let me know how to mute the sound?

Try change this :

<video autoplay loop poster="/wp-content/themes/Simplicity/images/header.jpg" id="bg-video">

to

<video autoplay loop muted poster="/wp-content/themes/Simplicity/images/header.jpg" id="bg-video">

The other thing is on mobile device video is not responsive.

Try add this media query css:

@media only screen and (max-width:768px) {.imageBg #gk-head {background-image: none !important;}
#bg-video{width:auto;}
}

Kindly ensure to clear your browser cache if changes dont reflect

infocubic · Sep 25, 2018

aman204

How do I change the image showing before the videobackbround loads (Deskto, mobile and tablet)
? please help

Joshua-M · Sep 25, 2018

infocubic
Hi,
You can add background images to your #gk-head tag.
I can see it's added, but blocked by your custom css:

#gk-head {
    background: transparent!important; 
}

@media only screen and (max-width: 768px)
.imageBg #gk-head {
    background-image: none !important;
}

Try to remove this code and should be fine.

Cheers
Joshua

Support Central