Kopfbereich Video hintergrund in bestimmtem Style

  • Hallo ich nutze einen Legion Style für mein Forum und möchte nur bei diesem Style folgendes einfügen


    In den head soll dass hier :


    <script type="text/javascript">
    //<![CDATA[
    $(document).ready(function(){});


    // Background Video -- To disable, set the Background position to fixed in ACP: Style Management
    $(document).ready(function() {
    if($(window).width() >= 1200) {
    var html_bg_video = '<video preload="auto" autoplay="true" loop="loop">';
    html_bg_video += ' <source src="http://www.goldenerlotus-gilde.de/eqdk/templates/eqdkp_legion/videos/key-render.mp4" type="video/mp4">';
    html_bg_video += ' <source src="http://www.goldenerlotus-gilde.de/eqdk/templates/eqdkp_legion/videos/key-render.webm" type="video/webm">';
    html_bg_video += '</video>';

    $('#bg-video-wrapper').html(html_bg_video);
    $('#bg-video-wrapper video').on('canplaythrough', function() {
    if ($(this).css("opacity") != 1) {
    $(this).delay(100).fadeTo(4000, 1);
    }
    });
    } else {
    $('#bg-video-wrapper').hide();
    }
    });

    //]]>
    </script>


    und in den body direkt soll dass hier:
    <div id="bg-video-wrapper"><video style="opacity: 1;" preload="auto" autoplay loop> <source src="http://www.xxx/eqdk/templates/eqdkp_legion/videos/key-render.mp4" type="video/mp4"> <source src="http://www.xxx/eqdk/templates/eqdkp_legion/videos/key-render.webm" type="video/webm"></video>hier</div>


    Das ganze soll bewirken dass nicht nur ein Hintergrund Bild angezeigt wird sondern dass das Bild sich dann bewegt.


    Ich möchte es natürlich nur im Legion Style und nicht in den anderen wie bekomme ich das hin und wo muss ich was hinzufügen?


    Der Style dazu ist


    .bg-video-wrapper {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    z-index: -100;
    }

  • {if $__wcf->getStyleHandler()->getStyle()->styleID == X}VIDEOCODE{/if}


    Bei X die ID des Styles eintragen. Bei Videocode das was in den body kommt reinpacken.


    (credits an Fabi_995)

  • Hmm, kann dir sagen wie ich das gemacht habe bei uns.


    Ich habe eine tpl datei namens webm erstellt und diese in den wcf/template Ordner gepackt mit folgenden Inhalt


    Code
    {if $__wcf->getStyleHandler()->getStyle()->styleID == X}<video id="backgroundVideo" autoplay="true" loop="loop">
    <source src="http://pfadzum.webm" type="video/webm">
                </video>{/if}

    styleID == X sowie den link zum webm anpassen


    In das documentHeader template habe ich dann folgendes reingepackt

    Code
    {include file="webm"}

    CSS sieht so aus.

    Musste auch noch ein paar andere Forum Elemente hin und her schieben damit es am Ende passt.

  • Ok das hier ist meiner


    cass


    HTML
    <div id="bg-video-wrapper"><video style="opacity: 1;" preload="auto" autoplay="true" loop="loop">	<source src="../eqdk/templates/eqdkp_legion/videos/key-render.mp4" type="video/mp4">	<source src="../eqdk/templates/eqdkp_legion/videos/key-render.webm" type="video/webm"></video></div>


    Ich müsste ja dann den Java auch wo reinpacken aber wo und wie

  • Super jetzt funktioniert es.
    Template Datei erstellt so wie beschrieben.
    mit dem dive HTML inhalt und deinem If code.


    Dann in die css vom Template den Style rein mit #


    Dann noch include und fertig

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!