✔ WordPress: Sydney Video slides

[mediamat]

Hallo,

da im WordPressForum irgendwie tote Hose ist, probier ichs mal hier:
"Sydney" ist dieses populäre gratis WordPress theme. Da gibts standardmäßig einen Header-Bildslider, der gleich oben steht und immer 100% Höhe des Browserfensters hat. http://demo.athemes.com/sydney/

Nun hab ich gesehen (im Code auch) dass jemand den Bildslider so bearbeitet hat, dass zwar im Code Bildpfade stehen, aber real Videoslides gezeigt werden. (Bilder dann nur bei mobil). Wie geht das?
besagte Webseite: das-tonwerk.de

(Hatte erst probiert das zu imitieren, indem ich den offiziellen Header-Slider oben ausschalte und einfach in den Contenbereich, dann nen Videoslider reintu. Aber das geht halt leider nicht 100% des Browsers. (der "Header-Bildslider" liegt übrigens im Code außerhalb des Bereichs "Content" daran liegts vielleicht irgendwie.
Ich benötige nun einen Tipp, wie ich ENTWEDER in den standard Header-Slider Videoslides reinbekomme, ODER wie ich bei ausgeschaltetem Header-Slider, die erste Zeile Content 100% Browserhöhe bekomme.)

 

[mediamat]

Dann mal anders gefragt:
Wenn online auf einer Webseite im Quellcode und im CSS nur Bilder liegen (durch Firebug abgecheckt)...wie geht das dann, dass man trotzdem anstelle des Bildes ein MP4 aufruft?

Ich kenne Videotags die ein Fallback-Bild haben, aber das ist es hier nicht... es ist wie ein Bild das ein Video-Fallback hat und das Interessante: der Videofallback steht nicht mal irgendwo im Code??!

 

[sheel]

Firebug kann JS-Aktionen teilweise leider nicht wirklich anzeigen...
und die besagte Seite funktioniert ohne JS überhaupt nicht, also vermute ich einfach mal, dass auch das JS ist.

 

[mediamat]

Ok, danke für das Feedback. Ist dann irgendwie bisschen zu knifflig für mich.

 

[SpiceLab]

Wenn online auf einer Webseite im Quellcode und im CSS nur Bilder liegen (durch Firebug abgecheckt)...wie geht das dann, dass man trotzdem anstelle des Bildes ein MP4 aufruft?

Firebug listet mir unter "Netzwerk -> Alles" zwei MP4-Dateien namens "tonwerk_background.mp4" und "tonwerk_showreel.mp4" auf, die sich im HTML-Code in den Zeilen 199 u. 228 wiederfinden:

<!-- Zeile 199 --><video autoplay loop poster="http://www.das-tonwerk.de/wp-content/themes/DasTonwerk/vid/tonwerk_background/tonwerk_background.jpg" id="bgvid">
    <source src="http://www.das-tonwerk.de/wp-content/themes/DasTonwerk/vid/tonwerk_background/tonwerk_background.mp4" type="video/mp4">
</video>

<!-- Zeile 228 --><video src="http://preview.das-tonwerk.de/wp-content/themes/DasTonwerk/vid/tonwerk_showreel/tonwerk_showreel.mp4" id="so_bgvideo_57e94ffa9a1db" class="so_video_bg jquery-background-video" poster="http://preview.das-tonwerk.de/wp-content/themes/DasTonwerk/vid/tonwerk_showreel/tonwerk_showreel.jpg" data-bgvideo-fade-in="0"  data-bgvideo-show-pause-play=true data-bgvideo-pause-play-x-pos="left" data-bgvideo-pause-play-y-pos="top">
                    <source src="http://preview.das-tonwerk.de/wp-content/themes/DasTonwerk/vid/tonwerk_showreel/tonwerk_showreel.mp4" type="video/mp4">                                                    </video>
         
            <script type="text/javascript">
            (function() {
                // Move the video and container into the row as the first child
                var video_tag = document.getElementById("so_bgvideo_57e94ffa9a1db");
                var video_overlay = document.getElementById("so_bgvideo_overlay_57e94ffa9a1db");
                var video_row = video_tag.previousSibling;
                while(video_row && video_row.nodeType != 1) {
                    video_row = video_row.previousSibling;
                }
                var row_inner = video_row.firstChild;
                row_inner.insertBefore( video_tag, row_inner.firstChild );
                if( video_overlay ) {
                    row_inner.insertBefore( video_overlay, video_tag.nextSibling);
                }
                row_inner.className += ' so_video_bg_row jquery-background-video-wrapper';
                // video_tag.play();
            }());
            </script>

"tonwerk_background.mp4" füllt den Seitenhintergrund aus, "tonwerk_showreel.mp4" wird beim Klick auf die Bilder (unter "Tonwerke" http://www.das-tonwerk.de/#pg-6-1) gestartet. Für jedes Bild existiert eine Sprungmarke innerhalb des Videos, das alle einzelnen Trailer beinhaltet.

Und welches Bild wird hier nun Deiner Meinung durch das Video ersetzt?

 

[mediamat]

Aha ok, vielen Dank. Den Tab hab ich noch nie groß genutzt...hab immer nur bei "HTML" geguckt.