Animated Background?

[fperture]

I am not sure this is the right place to post, but here we go:



FORUM URL: www.urbancenter.boards.net



I would like an animated background, perhaps using a video / video URL that will continue looping. How can this be done?

[elli]

Yes, can you describe more as far as where you want to use it/how big it should be?

[fperture]

I want to use it as my main background of the website. Just tell me how to do it

[elli]

Okay, but there are more details that will determine the code I give you.

Now I know that it's the primary background. Should it fill the browser window, or sit in a defined area? Is it static, or will it scroll? Do you want it to loop? Should it autoplay?

I ask these questions because I know that, if I were to provide you with a simple code for this effect, you would likely have additional feature requests. It makes more sense for the both of us to get it right the first time, yes?

[fperture]

Yes sorry

It's a animated background that should fill the brower window. It will be static and should loop.

Look at my example bellow of how it should be.

EXAMPLE: nebulous.cloud/

[Former Member]

One important question would be, where is the video source coming from?

The example provided uses html video player but the video is uploaded locally.
If you were to use a source from youtube or vimeo, you wouldn't be able to use the html 5 video player.

Instead you would need to use an embedded iframe/object and see if the source query string allows things like
"?autoplay=1&controls=0" etc.

Making it full screen, you would need to then set the iframe container to be

.container{
 position: fixed; /** so it doesn't scroll **/
 z-index: -1;
 height: calc( 100vh - any padding)
 width: 100vw;

 iframe,object{
   position: absolute;
   top: 0;
   left: 0;
   padding: /** you would need to work this out based on video aspect ratio **/
 }
}

You would also need to take into consideration, your forum width and transparent title-bars/content if you wanted to have the video play through those(not essential).

I don't have time to code this for you, so I'm just offering solutions to those willing to do it for you.

[elli]

fperture And a good example too, thanks. I'll have this for you shortly.

[elli]

fperture This first option is an HTML5 video player; you'll need to host the video yourself if you take this route:

codepen.io/ebbymac/full/ZLXErx/

<video playsinline autoplay muted loop poster="videostill.jpg" class="backgroundVideo">
  <source src="video.webm" type="video/webm">
  <source src="video.mp4" type="video/mp4">
</video>


.backgroundVideo {
  background: url(videostill.jpg) no-repeat;
  background-size: cover;
  width: auto;
  height: auto;
  min-width: 100%;
  min-height: 100%;
  position: fixed;
  top: 0;
  left: 50%;
  z-index: -100;
  -ms-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

You'll want to replace videostill.jpg with an image (jpg recommended) that will show up if the video can't load. Also, load a webm version first as a fallback to the higher-res mp4. This is mostly for people with slower internet connections. You can read more here: thenewcode.com/777/Create-Fullscreen-HTML5-Page-Background-Video

Using YouTube is a little tricky. Basically, you have to use the YouTube API so that the video starts muted, and YouTube annoyingly insists on maintaining aspect ratio and horizontal/vertical positioning, so it has to be wider than the browser. At least, this is how I've worked it out, it's not beyond the realm of possibility that that can be changed: developers.google.com/youtube/iframe_api_reference

codepen.io/ebbymac/full/RKLwPm

<div class="backgroundVideoContainer">
  <div class="backgroundVideo">
     <div id="videoPlayer"></div>
  </div>
</div>

.backgroundVideoContainer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -999;
}

.backgroundVideo,
.backgroundVideo iframe {
  width: 200%;
  height: 200%;
  position: absolute;
  top: -50%;
  left: -50%;
  z-index: -99;
}

var player;
function onYouTubeIframeAPIReady() {
  player = new YT.Player('videoPlayer', {
     videoId: 'y1yFiotx3qk', // YouTube Video ID
     playerVars: {
        autoplay: 1, // Auto-play the video on load
        controls: 0, // Hide pause/play buttons in player
        showinfo: 0, // Hide the video title
        modestbranding: 1, // Hide the Youtube Logo
        loop: 1, // Run the video in a loop
        fs: 0, // Hide the full screen button
        cc_load_policy: 0, // Hide closed captions
        iv_load_policy: 3, // Hide the Video Annotations
        autohide: 0 // Hide video controls when playing
     },
     events: {
        onReady: function(e) {
           e.target.mute();
        }
     }
  });
}

function onPlayerReady(event) {
  event.target.playVideo();
}

[elli]

Jan 25, 2017 18:52:16 GMT -8 @synthtec said:

html video player is not an option !

I already said this, not sure why you are providing examples that won't work.
Your example does not go over any information I have not already provided!

??

These aren't examples, they're complete, working codes that I assembled from multiple sources. All the OP has to do now is add their video files or YouTube ID. And I provided both options in case they have access to a server to host the files for an HTML5 player (which would work fine, by the way).

You sound agitated, and I'm not sure why since you added that you didn't have time to provide the full code? I expanded on your example with the necessary YouTube API to mute the source, and complete markup... really confused by your response, in a help thread nonetheless, unless I'm completely misunderstanding your tone.

[Former Member]

elli

No No was not agitated, sorry looking back on my response I could see why you though that!
I was in no way having a pop at you, so sorry If it came off rude, I could see why you might think that
hence the post deletion, I agree, it looked rude, but was not intended.

[fperture]

Perhaps you can help me by remote control? I do have teamviewer.

[elli]

fperture What else do you need help with? The full code is posted above. Are you wondering where to add it, how to host videos...?

[fperture]

Yes, I am wondering where to add the code.

[elli]

fperture Luckily, it's pretty straightforward. HTML and JavaScript in the Forum Wrapper layout template, CSS goes in the "Style Sheet"

1. Admin > Themes > Layout Templates > Forum Wrapper
2. Find the $[head] variable
3. Create a new line directly below it and paste your JavaScript here
   
   • Make sure you wrap it in <script> tags (let me know if you do not know how to do this)
4. Find the line <div id="wrapper">
5. Create a new line directly above it and paste your HTML here
6. Click "Save Changes"
7. Admin > Themes > Advanced Styles & CSS > "Style Sheet"
8. Scroll to the very end of the text area, create a new line or two, and paste your CSS here
9. Click "Save Changes"