Hallo zusammen,
also ich mühe mich gerade mit einem Video ab, was mir als mp4 Datei vorliegt.
Dies soll ohne Ton und in Endlosschleife als Vollbild statt dem Hintergrund-Bild laufen.
Hatte es über eine Box versucht, aber dann ist die Box auch da und spielt das Video irgendwie ab.
Habt ihr hierfür ein Tutorial oder ähnliches? Tue mich leider ziemlich schwer mit dem Templatesystem von Woltlab 
Danke und LG
TomKay
Mal damit versucht?
http://be-jo.net/2014/04/video…ndbild-mit-html5-und-css/
Du könntest das einfach mal in den Footer-Code packen:
Es wird ja eh absolut positioniert, daher eigentlich egal wo man es einfügt. Aber so musst du keine Templates ändern.
Leider funktioniert das nur für 1-2 Sekunden und dann erscheint das Hintergrundbild wieder und das Video legt sich komplett über den aktuell nicht sichtbaren Teil des Forums, der beim runterscrollen erst dann sichtbar wird, hier mal bisschen rausgezoomt:
Ich habs mal im Demofourm ausprobiert:
http://demo.ws3.cls-design.com/forum/?styleID=8
HTML, am besten in das Template footerNote, ans Ende:
<video id="video_background" preload="auto" autoplay="true" loop="loop" muted="muted" volume="0">
<source src="http://demo.ws3.cls-design.com/background.mp4" type="video/mp4">
</video>
<div id="video_pattern"></div>und CSS:
#video_background {
position: fixed;
top: 0px;
right: 0px;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -1;
overflow: hidden;
}
#video_pattern {
background-image: url(./pattern.png);
position: fixed;
opacity: 0.5;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: -1;
}
@include screen-md-down {
#video_background {
display: none;
}
}Man sollte wohl das erste Frame des Videos als Hintergrundbild setzen und nicht vergessen die Hintergrundfarbe ebenfalls an das Video anzupassen damit die Flickereffekte beim Videostart so weit wie möglich verringert werden.
Wenn das Fenster immer noch nicht verschwindet schaue mal ob du dieses Plugin installiert hast https://pluginstore.woltlab.co…iaelement-js-integration/
Das hatte ich drin und hatte auch das Fenster was sich dann mit Steuerelementen über das Forum legte. Schmeiss das Plugin raus und es sollte dann gehen mit dem Tutorial von @Tom
Das mit dem Video BG würde mich auch interessieren, allerdings verschiebt sich dann der ganze seiteninhalt und das Video wird über die seite gelegt.
Muss ich bei dem HTML Code den alten löschen oder nur mit dem obigen ergänzen ?
Und was bedeutet am Ende einfügen ? Nach dem </script> ?
<div class="copyright" style="margin-top:10px;">
{lang}wcf.cls-design.copyright.base{/lang}
</div>
<div id="footerNote" style="display: none;">
<div id="footerNoteContent">
<dl>
<dt>{lang}wcf.cls-design.name{/lang}</dt>
<dd>{lang}wcf.cls-design.base{/lang}</dd>
</dl>
<dl>
<dt>{lang}wcf.cls-design.manufacturer{/lang}</dt>
<dd>{lang}wcf.cls-design.homePage{/lang}</dd>
</dl>
<dl>
<dt>{lang}wcf.cls-design.designer{/lang}</dt>
<dd>{lang}wcf.cls-design.designersNameTom{/lang}</dd>
</dl>
<dl>
<dt>{lang}wcf.cls-design.licence{/lang}</dt>
<dd>{lang}wcf.cls-design.licenceCommercial{/lang}</dd>
</dl>
<dl>
<dt>{lang}wcf.cls-design.support{/lang}</dt>
<dd>{lang}wcf.cls-design.supportURL{/lang}</dd>
</dl>
<div class="formSubmit">
{lang}wcf.cls-design.visit{/lang}
</div>
</div>
</div>
<script data-relocate="true">
//<![CDATA[
$(function() {
$('#footerNoteItem').click(function() {
$('#footerNote').wcfDialog({
title: '{lang}wcf.cls-design.styleInformation{/lang}'
});
return false;
});
});
//]]>
</script>
