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

      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

          Joshua-M

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

          1. I want to put the video in loop
          2. On mouse over I need to remove play/pause option and YouTube icon at the bottom right side
          3. 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>}

              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;
}

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

                      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;
}

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

                          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

                              aman204

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

                                  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

                                    Write a Reply...
                                    You need to Login to view replies.