Hero and background image issue

domir21

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?

dominic

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.

domir21

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 🙂

dominic

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.

domir21

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.

dominic

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

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

domir21

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.

dominic

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

domir21

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.

dominic

Hi domir21,
I'm checking this issue.

domir21

Hello dominic
did you find the solution Dominic? 🙂

dominic

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.

domir21

WOW dominic !
This is great! Thank you so much! <3