Here is my question.
Is it possible to add moving background on mybb forum? I mean .flv, .mp4, .webm?
Got site what I working on actually with moving backgrounds and wanna made also a forum board on mybb with similiar theme but thinking first is it generally possible or how to do it?
Any ideas?
You can use the HTML5 tag <video> and use CSS z-index setting
Made it but still have some issues:
http://forum.onewingedangel.pl
In headerinclde:
<video id="bgVideo" controls preload="false" autoplay loop muted>
<source src="http://www.wardensvault.com/videos/video1.mp4" type="video/mp4" >
<source src="http://www.wardensvault.com/videos/video1.webm" type="video/webm" >
</video>
But controls are still showed.
And second thing i guess is in css, video isnt centered.
(2015-08-17, 10:38 AM)tomekg Wrote: [ -> ]Made it but still have some issues:
http://forum.onewingedangel.pl
In headerinclde:
<video id="bgVideo" controls preload="false" autoplay loop muted>
<source src="http://www.wardensvault.com/videos/video1.mp4" type="video/mp4" >
<source src="http://www.wardensvault.com/videos/video1.webm" type="video/webm" >
</video>
But controls are still showed.
And second thing i guess is in css, video isnt centered.
I do not see the controls?
Weird, maybe its just opera, im in work and dont have here ff and edge.. not using opera normally. Tell me, did You see something in global.css of videobg that I can modify to make this video centered? Atm it looks like top-left.
try to remove controls like this:
<video id="bgVideo" preload="false" autoplay loop muted>
Controls are showed in bottom if you put your mouse
Changed a bit:
position: absolute;
right: 0;
bottom: 0;
min-width: 100%;
height: auto;
min-height: 100%;
z-index: -100;
background-size: cover;
Into this css from my second site:
position: fixed;
top:50%;
left:50%;
min-width: 100%;
width: auto;
height: auto;
z-index: -1;
overflow: hidden;
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
-o-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
Works perfect now
(2015-08-17, 11:42 AM)tomekg Wrote: [ -> ]Changed a bit:
position: absolute;
right: 0;
bottom: 0;
min-width: 100%;
height: auto;
min-height: 100%;
z-index: -100;
background-size: cover;
Into this css from my second site:
position: fixed;
top:50%;
left:50%;
min-width: 100%;
width: auto;
height: auto;
z-index: -1;
overflow: hidden;
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
-o-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
Works perfect now
once i doing your steps but its kill the forum after doing it i get a blank page with the video only
