Happy New Year! Enjoy 30% OFF 🎄
Coupon Code: XMAS30 - Renew: XMAS_RENEW30

Hi,
I need help setting the position of the "hero" module. If you check the HOME page, you will find the hero module under the background image set in the site style. I would like to have a background image under the hero module - without fade-in.

My second need is to set up background video in this position as well. If you toggle Layouts Settings >
Row Options > Hero > OVERLAY > Video
The video must be displayed on the entire module position - now it is only on part of the screen. Can we hide the subtitles, title and YouTube logo by zooming in on the video?

    Hi domir21,
    I have helped you configure in the backend and add the following CSS code:

    .bg-overlay-vid {
        width: 100%;
        height: 100%;
    }

    You can check it now.

      Hi dominic,
      Thank you, but I need a little change. If you visit the page, you will find the video without the fade effect, but... the video is above the module content, there are no buttons, module header or description - now we can only see the button arrows.
      I need to configure this video view like this: https://www.shelmo.pl/

      • no YouTube logo, no YouTube titles and icons, and autoplay must be turned on.
        I hope I described it well - better than before 🙂

        Hi domir21,
        I have updated the configuration in the overlay option, you can check it now.
        Regarding the auto-play and hiding some icons, I sent it to our technical team, and we are checking it.

          Hi,
          dominic
          thank you, but it still doesn't look good. Now the module title, description and buttons are hidden. Video is above the rest, but it should stay behind.
          I want to have the video in back. As in the link I sent you.
          I'll wait for a solution to auto-play and hide some icons.
          Have a nice day.

            Hi domir21,
            You can update the overlay setting as the following screenshot:

            About the auto-play and hiding some icons, we will check it.

              Hi dominic
              I don't want to have overlay there need to be seen film in background and module must be on it. NO overlay plase.
              I have send you a link befeore - I need the same look for hero.

                Hi domir21,
                I have added the following CSS code to your site, you can check your site now:

                .acm-hero.style-1 {
                    padding: 80px 0;
                }
                
                .acm-hero.style-1 .hero-content{
                  	position: relative;
                    z-index: 1;
                }
                
                .acm-hero.style-1 .description {
                   color: #fff;
                }

                  Hi dominic 🙂
                  yes this is it! 🙂 thanks a lot!
                  Now I am waiting just for filling the view with the background video in the whole position like on this page:

                  Have a nice day!
                  D.

                    4 days later

                    Hi domir21,
                    I have duplicated the style-1.php file from the /templates/ja_festival/acm/hero/tmpl folder and rename into style-2.php file with the following code:

                    Add the following code in line 10:

                          <!---load video--->
                          <div class="fullscreen-video-background">
                              <div class="_pattern-overlay"></div>
                              <div id="_buffering-background"></div>
                              <div id="_youtube-iframe-wrapper">
                                  <div id="_youtube-iframe" data-youtubeurl="WrtzKFF5F0M"></div>
                              </div>
                          </div>

                    And add the following code to bottom of the file:

                    
                    <!---load CSS for video--->
                    <style>
                      /*/////////////////////////////*/
                    .fullscreen-video-background {
                      background: #000;
                      position: absolute;
                      width: 100%;
                      overflow: hidden;
                      height: 100%;
                      top: 0;
                    }
                    .fullscreen-video-background ._pattern-overlay {
                      position: absolute;
                      top: 0;
                      width: 100%;
                      opacity: 0.3;
                      bottom: 0;
                      background-image: url(https://cdnjs.cloudflare.com/ajax/libs/vegas/2.3.1/overlays/03.png);
                      z-index: 2;
                    }
                    .fullscreen-video-background #_buffering-background {
                      position: absolute;
                      width: 100%;
                      top: 0;
                      bottom: 0;
                      background: #222;
                    
                    }
                    .fullscreen-video-background #_youtube-iframe-wrapper {
                      display: flex;
                      justify-content: center;
                      align-items: center;
                      width: 100%;
                      position: absolute;
                      height: 100%;
                      z-index: 1;
                    }
                    .fullscreen-video-background #_youtube-iframe-wrapper #_youtube-iframe {
                      position: absolute;
                      pointer-events: none;
                      margin: 0 auto;
                      height: 300vh;
                      width: 120vw;
                    }
                      </style>
                    
                    <!---load JS for video--->
                    <script>
                    	// 2. This code loads the Youtube IFrame Player API code asynchronously.
                    	var tag = document.createElement('script');
                    	tag.src = "https://www.youtube.com/iframe_api";
                    	var firstScriptTag = document.getElementsByTagName('script')[0];
                    	firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
                    
                    	// 3. This function creates an <iframe> (and YouTube player)
                    	//    after the API code downloads.
                    	var youtubePlayer;
                    	var _youtube_id = document.getElementById('_youtube-iframe');
                    	
                    	function onYouTubeIframeAPIReady() {				
                    		youtubePlayer = new YT.Player('_youtube-iframe', {
                    			videoId: _youtube_id.dataset.youtubeurl,
                    			playerVars: { // https://developers.google.com/youtube/player_parameters?playerVersion=HTML5
                    				cc_load_policy: 0, // closed caption
                    				controls: 0,
                    				disablekb: 0, //disable keyboard
                    				iv_load_policy: 3, // annotations
                    				playsinline: 1, // play inline on iOS
                    				rel: 0, // related videos
                    				showinfo: 0, // title
                    				modestbranding: 3 // youtube logo
                    			},
                    			events: {
                    				'onReady': onYoutubePlayerReady,
                    				'onStateChange': onYoutubePlayerStateChange
                    			}
                    		});
                    	}
                    	
                    	function onYoutubePlayerReady(event) {
                    		event.target.mute();
                    		event.target.playVideo();				
                    	}
                    
                    	function onYoutubePlayerStateChange(event) {
                    		if (event.data == YT.PlayerState.PLAYING) { // fade out #_buffering-background
                    			Velocity(document.getElementById('_buffering-background'), { opacity: 0 }, 500);
                    		}
                    		
                    		if (event.data == YT.PlayerState.ENDED) { // loop video
                    			event.target.playVideo();
                    		}
                    	}
                    </script> 

                    Now, you can use the Hero: style-2 and disable the video overlay for the Hero section from the Layout settings.

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