Animated background only on main page of the site

[resisbeststat]

Hey there. I've been trying to add an animated background to my site for Christmas since it's a special occasion and all that. I found a way to add said animated background (Which is in reality just a video being played in place of the background itself). However, my method utilizes the Layout Template in Forum Wrapper. Therefore, the animated background appears on all pages and not only on the main page.

This normally wouldn't be an issue, but the video I'm using has audio in it. I'm not quite sure how to add a mute button since I'm not really a competent coder. Is there a way to make it so the animated background only plays on the main page? Is it also possible to have the animated background play on all pages, but include a mute button alongside it?

The code I've been using so far is:

<video playsinline autoplay loop poster="https://puu.sh/ylgA9/b1affdc9be.png" class="backgroundVideo">
<source src="https://puu.sh/ylhMh/d5e7e3e3a3.webm" type="video/webm">
<source src="https://puu.sh/yljEx/f030566391.mp4" type="video/mp4">
</video>

directly above <div id="wrapper"> in the Forum Wrapper layout page.

The CSS is:

.backgroundVideo {
background: url(https://puu.sh/ylgA9/b1affdc9be.png) no-repeat;
background-size: cover;
width: auto;
height: auto;
min-width: 100%;
min-height: 100%;
position: fixed;
top: 0;
left: 50%;
z-index: -100;
transform: translateX(-50%);
}

Thanks in advance!

[aRMY83]

Add this to the code to add mute button and controls for sound:

<video playsinline autoplay loop controls poster="https://puu.sh/ylgA9/b1affdc9be.png" class="backgroundVideo">
<source src="https://puu.sh/ylhMh/d5e7e3e3a3.webm" type="video/webm">
<source src="https://puu.sh/yljEx/f030566391.mp4" type="video/mp4">
</video>

[resisbeststat]

Hi and thanks for replying!

I've added controls to the code, but the mute button and sound options won't show up. I think it might be due to the video being an animated background, therefore covering the screen and leaving no space for the controls, but I'm not entirely sure. Still, mute and sound options won't show up even with controls in the code.

What should I do?

[aRMY83]

Sure works on my test site. If I may ask, are you the admin of that forum and if so, you need to get this plugin for it to work:

HTML In Post by Pebble

You have to create a account and then download it from the link above.

[aRMY83]

Hello resisbeststat

Update: I had your code in a posting page using HTML In Post by Pebble and added the [html] above that code and it worked just fine.

Did as you did and placed that code in the Forum Wrapper above everything else with the controls added and sure enough, it did not work.

Will tag Brian or Ulises and see if they have any input on why it is not working in your Forum Wrapper with the controls added.

Other than that, I'm at a loss as to why it is not working.

p.s. it I may suggest, you may want to add your forum URL in your OP post.

[Philip]

First you need to set the {object-fit} CSS property, this is somewhat similar to what {background-size} does, visually.

video.backgroundVideo{

position: fixed;

top: 0;

left: 0;

background: url(https://puu.sh/ylgA9/b1affdc9be.png);

background-size: cover;

background-repeat: no-repeat;

background-position: 100% 100%;

width: calc(100vw);

height: calc(100vh);


z-index: -1;


-o-object-fit: cover;

object-fit: cover;

}


/** fix ie/edge **/

@supports(-ms-ime-align:auto){

  video.backgroundVideo{ height: initial; }

}

Next, you will need to change the markup as follows, inside your {forum_wrapper} template

{if $[route.name] == "home" || $[route.name] == "forum"}

<video loop autoplay onloadeddata="return customControls.setVolumeLevel(0.3);" class="backgroundVideo">
<source src="https://puu.sh/ylhMh/d5e7e3e3a3.webm" type="video/webm">
<source src="https://puu.sh/yljEx/f030566391.mp4" type="video/mp4">
</video>
<!-- / video element / -->

<div class='volume'>
<input id='volume-control' class='volume__control' type='range' value='0' min='0' max='1' step='0.1'>
</div>
<!-- / video volume control / -->

<!-- will only show on main forum or home page -->

{/if}

I removed the default video player controls and created a custom volume control for you.
The onloadeddata event will, simply set the volume to 0.3 initially, rather than the default 1.0, headphone users will appreciate this

Next, paste in the following script under the markup provided above.




<script>
   var customControls = (function(){
     var volumeRange, videoEl;
     
     var _setUpCustomControl = function(){
       videoEl = document.querySelector('.backgroundVideo')
         
      volumeRange = document.getElementById('volume-control')
       volumeRange.value = videoEl.volume.toString()
       
       volumeRange.addEventListener('change', function(e){
         var _volume = parseFloat(e.currentTarget.value)
         _setVolumeLevel(_volume)
       })
     };
     
     var _setVolumeLevel = function(volume){
       videoEl.volume = volume
       volumeRange.value = volume.toString()
     };
     
       
     document.addEventListener('DOMContentLoaded', _setUpCustomControl);
       
      return {
       setVolumeLevel: _setVolumeLevel
     }
     
   })();
 </script>


Finally for the volume range control CSS, add the following to your stylesheet

.volume{

background-color: rgba(255,255,255,.2);

display: inline-block;

position: fixed;

bottom: 80px;

left: 40px;

padding: .5em;

border-radius: 8px;

-webkit-transform: rotate(270deg) ;

-ms-transform: rotate(270deg);

transform: rotate(270deg);



-webkit-transform-origin: left center;

-ms-transform-origin: left center;

transform-origin: left center;


}

The above CSS will rotate the range slider(input[type=range]) to a vertical one, rather than a horizontal one.


I hope this was helpful to you. 

[resisbeststat]

Hi phil and thanks for the help! I've tried it out and while I still see no volume slider, at least the animated background only plays on the main page. That's some progress at least.

Anyways, the volume is definitely lower than usual. However, I saw no volume slider. I thought I might have pasted the code incorrectly or left something out. However, I pasted all of your code in a CodePen and it works like a charm. Must be related to the position of the code I guess. Therefore, I decided to just show you screenshots of the forum wrapper and CSS style sheet.



This is the forum wrapper. I put the Javascript underneath the {/if}. Is this where it's supposed to be or not? Also, this entire piece of code is located directly above <div id="wrapper"> of an untouched Forum Wrapper.



This is where I put the first CSS code. It's underneath all of the default Proboards CSS code.



And this is the final CSS code which is located directly below that.

By the way, this is how the background looks like on the forum itself.



There is no volume slider hidden in the middle of the page or anything. I checked and checked again to no avail.



This is how it looks on CodePen. The volume slider is actually a thing in here.

Any reason why the forum won't show it? Do I need some sort of plugin? 

[Philip]

No plugin required. can you link me to your forum, to better debug ? something on your forum may be blocking it.

Cheers

[resisbeststat]

Sorry for the late reply. Was busy for the week and almost forgot about this question lol


Here's the forum link.

[Philip]

Nov 28, 2017 13:01:20 GMT -8 resisbeststat said:

Sorry for the late reply. Was busy for the week and almost forgot about this question lol


Here's the forum link.

Just move, <div class='volume'> outside/after the <video> tag. That should fix it.

[resisbeststat]

It works! Thanks a lot! You can lock this thread now I guess