How to add video background in place of header image

infocubic · Sep 20, 2018

Hi,

Please let me know how do I add video background in place of header image?

Joshua-M · Sep 20, 2018

infocubic
Hi,
This article should be helpful: https://www.gavick.com/blog/make-video-header-background
(it's for SteakHouse theme, but the idea is the same)

Please notice, that in the Simplicity theme header id is called:

#gk-head

instead of #gk-header

Hope it helps..

Cheers
Joshua

infocubic · Sep 20, 2018

Joshua-M

I have added the code and youtube link as per the steps on test site http://decisionquotient.org/, but only sound is coming no video nothing.

Can you help me to achieve this?

infocubic · Sep 21, 2018

infocubic

Can anyone respond to this query?

Joshua-M · Sep 21, 2018

Hi,
Please add your iframe or video code after <header id="gk-head".. (Simplicity/layouts/header.php file), not into text widget. (it's described in the article)

Cheers
Joshua

infocubic · Sep 21, 2018

Joshua-M

I have added as per your suggestion but still a blank and video sound comes... Please have a check and let me know....

I am trying on the test site http://decisionquotient.org/

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