✔ Nachladen?

YotErra · 4. April 2017

...gerade eine sehr laaaange antwort geschrieben was ich schon alles ausprobiert habe und es trotz allem nicht funktioniert und soeben doch noch wundersamerweise die jquery.js gespeichert und es funktioniert, krachometer!
http://yoterra.de/team100.html
...uffff, es ist nicht wirklich einfach wenn man keine ahnung von all der materie hat, mein gehirn qualmt ordentlich...

wird das ganze genau so auch für die iframes eingebunden...? (das probiere ich heute eher nicht mehr aus, kann nicht mehr denken...)
mein knallharter anfangs angfängerversuch wird aber in etwa so werden, das script gedoppelt mit iframe anstatt img:

<script>
$(document).ready(function() {
$("iframe").unveil(200);
});
</script>

und unten dann: <iframe src="imgz/blind.png" data-src="https://www.youtube.com/embed/niuNlPo1q9M" usw...></iframe>

was auch immer es tun wird wenn ich es schaffe dass es das tut wofür diese scripte da sin - das verhindert leider bestimmt nicht, dass die videos gleichzeitig abgespielt werden können, oder? wie stoppe ich dies...? die iFrame-API packe ich auf keinen fall selbst zu aktivieren... habe schon mal ein wenig herumgeklickt, sieht sehr außerirdisch schön aus

PS. ich weiß noch nicht mal wo genau ich dieses <noscript> <img src="img1.jpg" /> </noscript> reinsetzen sollte... im gleichen div wie das img? davor/danach/egal? wobei das auf jeden fall eigentlich auch wirklich egal ist... das nur ein video abspielen wäre total supertoll...

Sempervivum · 5. April 2017

wird das ganze genau so auch für die iframes eingebunden...?

Die Lazyload-Skripte sind eigentlich für Bilder gedacht aber ich habe mir unveil angesehen und soweit ich es beurteilen kann, wird es auch für iFrames funktionieren. Probiere es aus.

das verhindert leider bestimmt nicht, dass die videos gleichzeitig abgespielt werden können, oder? wie stoppe ich dies...? die iFrame-API packe ich auf keinen fall selbst zu aktivieren

Wie ich ebenfalls schon schrieb, braucht man die API wahrscheinlich nicht, sondern kann das Video stoppen, indem man den iFrame neu lädt. Das ist einfach und ich zeige es dir dann.

Sempervivum · 5. April 2017

Leider musste ich doch die iFrame-API nehmen, weil ein iFrame keine click-Events unterstützt. Dieses habe ich ausgearbeitet:

Code:

    <script src="https://www.youtube.com/iframe_api"></script>
    <script>
        var players = {}, activeid = "";
        var domready = false, apiready = false;

        function onPlayerStateChange(event) {
            var id = $(event.target.a).attr("id");
            if (activeid != "" && activeid != id) {
                //players[acticeid].player.destroy();
                createPlayer(activeid);
            }
            activeid = id;
        }

        function createPlayer(id) {
            $("#" + id).replaceWith('<div id="' + id + '"></div>');
            players[id].player = new YT.Player(id, {
                height: '113',
                width: '200',
                videoId: players[id].videoid,
                events: {
                    'onStateChange': onPlayerStateChange
                }
            });

        }

        function createPlayers() {
            if (domready && apiready) {
                for (id in players) {
                    createPlayer(id);
                }
            }
        };


        function onYouTubeIframeAPIReady() {
            apiready = true;
            createPlayers();
        }
        $(document).ready(function () {
            $("img").unveil(200);
            $("li > iframe").each(function (idx) {
                var src = $(this).attr("src");
                var videoid = src.replace("https://www.youtube.com/embed/", "");
                var id = "video" + (idx + 1);
                $(this).attr("id", id);
                players[id] = {};
                players[id].videoid = videoid;
                $(this).attr("src", "");
            });

            domready = true;
            createPlayers();
        });
    </script>

Dieses Skript stoppt das Video, das gerade läuft, wenn man ein anderes startet.
Du musst das Javascript, wo Du das unveil aufrufst, mit diesem ersetzen. Das unveil ist da auch drin. Ich habe das Skript so ausgelegt, dass Du an deinem HTML nicht ändern musst.
Weil ich die API verwenden musste, wird jetzt das unveil für die iFrames nicht funktionieren. Ich mache das Layzload für die Videos später.

Sempervivum · 5. April 2017

Lazyloading war dann relativ einfach, nachdem das Laden der Player mit der API fertig war:

Code:

    <script src="https://www.youtube.com/iframe_api"></script>
    <script>

        var players = {}, activeid = "";
        var domready = false, apiready = false;

        function onPlayerStateChange(event) {
            var id = $(event.target.a).attr("id");
            if (activeid != "" && activeid != id) {
                //players[acticeid].player.destroy();
                createPlayer(activeid);
            }
            activeid = id;
        }

        function createPlayer(id) {
            $("#" + id).replaceWith('<div id="' + id + '"></div>');
            players[id].player = new YT.Player(id, {
                height: '113',
                width: '200',
                videoId: players[id].videoid,
                events: {
                    'onStateChange': onPlayerStateChange
                }
            });
            players[id].created = true;
        }

        function inView(id) {
            $e = $("#" + id);
            //if ($e.is(":hidden")) return;
            var $w = $(window);
            var wt = $w.scrollTop(),
                wb = wt + $w.height(),
                et = $e.offset().top,
                eb = et + $e.height(),
                th = 200;

            return eb >= wt - th && et <= wb + th;
        }

        function createPlayers() {
            if (domready && apiready) {
                for (id in players) {
                    if (!players[id].created && inView(id)) createPlayer(id);
                }
            }
        };


        function onYouTubeIframeAPIReady() {
            apiready = true;
            createPlayers();
        }

        $(document).ready(function () {
            $("img").unveil(200);
            $("li > iframe").each(function (idx) {
                var id = "video" + (idx + 1);
                $(this).attr("id", id);
                var videoid = $(this).attr("data-videoid");
                players[id] = {};
                players[id].videoid = videoid;
            });

            domready = true;
            createPlayers();
            $(window).on("scroll", createPlayers);
        });
    </script>

Sempervivum · 5. April 2017

Damit das Lazyloading funktionierte, musste ich diesmal auch das HTML ändern:

HTML:

            <ul class="zitty">
                <li>
                    <!--link zum video--><iframe width="200" height="113" scr="images/dummy.jpg" data-videoid="k3mJLCSgM1w" frameborder="0" allowfullscreen=allowfullscreen></iframe>
                    <!--link zum video--><!--<iframe width="200" height="113" src="https://www.youtube.com/embed/k3mJLCSgM1w" frameborder="0" allowfullscreen=allowfullscreen></iframe>-->
                    <!--untertitel video-->
                    <span>
                        Gitte | Hallo wie geht es Robert<br /> <br />
                        <!-- zitat -->   "...Denk daran, mein Robert <br />braucht so viel Liebe..."<br />
                    </span>
                </li>
                <li>
                    <iframe width="200" height="113" scr="images/dummy.jpg" data-videoid="niuNlPo1q9M" frameborder="0" allowfullscreen=allowfullscreen></iframe>
                    <span>
                        The Beatles | Doctor Robert  <br /><br />
                        "Ring my friend I said you'd <br />call Dr. Robert..."<br />
                    </span>
                </li>
                <li>
                    <iframe width="200" height="113" scr="images/dummy.jpg" data-videoid="fi-jsDW_qqI" frameborder="0" allowfullscreen=allowfullscreen></iframe>
                    <span>
                        Dolly Parton | Robert <br /><br />
                        "Robert's appearance is something <br />to behold"
                    </span>
                </li>
                <li>
                    <iframe width="200" height="113" scr="images/dummy.jpg" data-videoid="hvejNad36Vo" frameborder="0" allowfullscreen=allowfullscreen></iframe>
                    <span>
                        Bob Seger | Bo Diddley <br /> <br />
                        "...Cool it, Robert, you know <br />you're my man..."
                    </span>
                </li>
            </ul>

            <!--ENDE person -->

            <hr style="border:solid #ffffff 10px;" />

            <!--START person 2-->

            <span>
                <h6>STEFAN</h6>
                <b>Stefan Tillmann | Gesch&auml;ftsf&uuml;hrung/Chefredaktion </b> <br /> Er mag Schokolade und Segeln und hat einen Hang zu sehr schicken Schuhen <br /><br />
                <b>Stefan Sauerbrey | Marketingleitung </b> <br /> Er mag Schokolade und Segeln und hat einen Hang zu sehr schicken Schuhen <br />  <br />
                <b>Stefan Hochgesand | Redaktion </b> <br /> Er mag Schokolade und Segeln und hat einen Hang zu sehr schicken Schuhen <br /> <br />
                <b>Stefan Haase | Anzeigen </b> <br /> Er mag Schokolade und Segeln und hat einen Hang zu sehr schicken Schuhen <br />     <br /> <br />
            </span>

            <div class="tooltip">
                <img src="imgz/blind.png" data-src="imgz/stefan_t.jpg" alt="" />
                <span class="tooltiptext">Stefan Tillmann</span>
            </div>

            <div class="tooltip">
                <img src="imgz/blind.png" data-src="imgz/stefan_s.jpg" alt="" />
                <span class="tooltiptext">Stefan Sauerbrey</span>
            </div>

            <div class="tooltip">
                <img src="imgz/blind.png" data-src="imgz/stefan_h.jpg" alt="" />
                <span class="tooltiptext">Stefan Hochgesand</span>
            </div>

            <div class="tooltip">
                <img src="imgz/blind.png" data-src="imgz/stefan_haase.jpg" alt="" />
                <span class="tooltiptext">Stefan Haase</span>
            </div>

            <ul class="zitty">
                <li>
                    <iframe width="200" height="113" scr="images/dummy.jpg" data-videoid="hJXT2V4wIPI" frameborder="0" allowfullscreen=allowfullscreen></iframe>
                    <span>
                        Ina M&uuml;ller | H&auml;tt ich n Hund <br /> <br />
                        "...Jetzt ist wieder Stefan dran,<br /> der alte Arsch..."
                    </span>
                </li>
                <li>
                    <iframe width="200" height="113" scr="images/dummy.jpg" data-videoid="-X1vEq98JeE" frameborder="0" allowfullscreen=allowfullscreen></iframe>
                    <span>
                        Marduk | Anno Domini 1476 <br /> <br />
                        "...But since Stefan failed his word..."
                    </span>
                </li>
                <li>
                    <iframe width="200" height="113" scr="images/dummy.jpg" data-videoid="oJTlNHGLmjU" frameborder="0" allowfullscreen=allowfullscreen></iframe>
                    <span>
                        Olli Schulz | Phase<br /> <br />
                        "...Du bist mit Stefan gekommen..."
                    </span>
                </li>
                <li>
                    <iframe width="200" height="113" scr="images/dummy.jpg" data-videoid="u5YAqVQJLGk" frameborder="0" allowfullscreen=allowfullscreen></iframe>
                    <span>
                        Dr. Dre | Ackrite (Feat. Hittman)  <br /> <br />
                        "...Stefan, tattooed on her arm..."
                    </span>
                </li>
            </ul>

            <!--ENDE person 3-->

            <hr style="border:solid #ffffff 10px;" />

            <!--START person -->

            <span>
                <h6>EDI</h6> <b>Editha Noth | Fee f&uuml;r Alles </b> <br /> Er mag Schokolade und Segeln und hat einen Hang zu sehr schicken Schuhen <br /><br /><br />
            </span>

            <div class="tooltip">
                <img src="imgz/blind.png" data-src="imgz/edi.jpg" alt="" />
                <span class="tooltiptext">Editha Noth</span>
            </div>

            <ul class="zitty">
                <li>
                    <iframe width="200" height="113" scr="images/dummy.jpg" data-videoid="uTOQD_Ckn3s" frameborder="0" allowfullscreen=allowfullscreen></iframe>
                    <span>
                        The Clash | Junkie Slip <br /> <br />
                        "...Yeh Edi-Edi-Edi- <br />Yeh Edi-Juan..."
                    </span>
                </li>
                <li>
                    <iframe width="200" height="113" scr="images/dummy.jpg" data-videoid="xytWbVJIsvI" frameborder="0" allowfullscreen=allowfullscreen></iframe>
                    <span>
                        DMX | It's All Good  <br /> <br />
                        "...Black like edi..."
                    </span>
                </li>
                <li>
                    <iframe width="200" height="113" scr="images/dummy.jpg" data-videoid="8YrsW2dLD90" frameborder="0" allowfullscreen=allowfullscreen></iframe>
                    <span>
                        EAV | K&uuml;ss die Hand Herr Kerkermeister<br /> <br />
                        "...da Edi kennt si&acute;aus..."
                    </span>
                </li>
            </ul>

            <!--ENDE person 4-->

            <hr style="border:solid #ffffff 10px;" />

            <!--START person -->

            <span>
                <h6>BABETTE</h6> <b>Babette Rautenberg | Die Zahlenzauberin </b> <br /> Er mag Schokolade und Segeln und hat einen Hang zu sehr schicken Schuhen <br /><br /><br />
            </span>

            <div class="tooltip">
                <img src="imgz/blind.png" data-src="imgz/babette.jpg" alt="" />
                <span class="tooltiptext">Babette Rautenberg </span>
            </div>

            <ul class="zitty">
                <li>
                    <iframe width="200" height="113" scr="images/dummy.jpg" data-videoid="e45oTMrctoE" frameborder="0" allowfullscreen=allowfullscreen></iframe>
                    <span>
                        Raw Fusion | Rockin' To The P.M.  <br /> <br />
                        "...Okay ni-ggas,  <br />and ba-bettes..."
                    </span>
                </li>
                <li>
                    <iframe width="200" height="113" scr="images/dummy.jpg" data-videoid="kfXLLV-xEsE" frameborder="0" allowfullscreen=allowfullscreen></iframe>
                    <span>
                        Midlake | In This Camp  <br /> <br />
                        "...I wanted to marry Babette..."
                    </span>
                </li>
                <li>
                    <span>
                        <b>  Evelyn K&uuml;nneke | Ach, Babette, backe Kuchen</b> <br /> <br />Das Lied haben wir nicht gefunden, gibt es aber auf einschl&auml;gigen Seiten zu erwerben mit der M&ouml;glichkeit zum Probeh&ouml;ren <br /> <br />
                        "...Ach, Babette, K&auml;sekuchen, den vermiss‘ ich so..."
                    </span>
                </li>
            </ul>

            <!--ENDE person 5-->

            <hr style="border:solid #ffffff 10px;" />

            <!--START person -->

            <span>
                <h6>LYDIA</h6> <b>Lydia Brakebusch | Chefredaktion </b> <br /> Er mag Schokolade und Segeln und hat einen Hang zu sehr schicken Schuhen <br /><br /><br />
            </span>

            <div class="tooltip">
                <img src="imgz/blind.png" data-src="imgz/lydia.jpg" alt="" />
                <span class="tooltiptext">Lydia Brakebusch </span>
            </div>

            <ul class="zitty">
                <li>
                    <iframe width="200" height="113" scr="images/dummy.jpg" data-videoid="n4zRe_wvJw8" frameborder="0" allowfullscreen=allowfullscreen></iframe>
                    <span>
                        Groucho Marx | Lydia the Tattooed Lady  <br /> <br />
                        "...Lydia, oh! Lydia, say have  <br /> you met Lydia..."
                    </span>
                </li>
                <li>
                    <iframe width="200" height="113" scr="images/dummy.jpg" data-videoid="V_k9mslBS0A" frameborder="0" allowfullscreen=allowfullscreen></iframe>
                    <span>
                        John Prine | Donald & Lydia <br /> <br />
                        "...Lydia hid her thoughts  <br />like a cat..."
                    </span>
                </li>
                <li>
                    <iframe width="200" height="113" scr="images/dummy.jpg" data-videoid="gx4fCnp2eT0" frameborder="0" allowfullscreen=allowfullscreen></iframe>
                    <span>
                        Dean Friedman | Lydia  <br /> <br />
                        "...Lydia, lydia how come you  <br />understand?..."
                    </span>
                </li>
            </ul>

            <!--ENDE person 6-->

            <hr style="border:solid #ffffff 10px;" />

            <!--START person -->

            <span>
                <h6>STEFANIE</h6> <b>Stefanie D&ouml;rre | Chefredaktion </b> <br /> Er mag Schokolade und Segeln und hat einen Hang zu sehr schicken Schuhen <br /><br /><br />
            </span>

            <div class="tooltip">
                <img src="imgz/blind.png" data-src="imgz/stefanie.jpg" alt="" />
                <span class="tooltiptext">Stefanie D&ouml;rre </span>
            </div>

            <ul class="zitty">
                <li>
                    <iframe width="200" height="113" scr="images/dummy.jpg" data-videoid="ZVO6e4faGMM" frameborder="0" allowfullscreen=allowfullscreen></iframe>
                    <span>
                        Fady Maalouf | Stephanie <br /> <br />
                        "...Stephanie, I cried for you..."
                    </span>
                </li>
                <li>
                    <iframe width="200" height="113" scr="images/dummy.jpg" data-videoid="nFXkqef3Njk" frameborder="0" allowfullscreen=allowfullscreen></iframe>
                    <span>
                        Wu-Tang Clan | Tearz <br /> <br />
                        "...With Stephanie, like a Whammy, <br />he pressed his luck..."
                    </span>
                </li>
                <li>
                    <iframe width="200" height="113" scr="images/dummy.jpg" data-videoid="5qfNDdqpza0" frameborder="0" allowfullscreen=allowfullscreen></iframe>
                    <span>
                        Love | Stephanie Knows Who   <br /> <br />
                        "What's in your life, <br />dear Stephanie..."
                    </span>
                </li>
                <li>
                    <iframe width="200" height="113" scr="images/dummy.jpg" data-videoid="pDigsY3GB44" frameborder="0" allowfullscreen=allowfullscreen></iframe>
                    <span>
                        Imperial Teen | Seven  <br /> <br />
                        "...Stephanie stops at seven..."
                    </span>
                </li>
            </ul>

            <!--ENDE person -->

            <hr style="border:solid #ffffff 10px;" />

            <!--START person 7-->

            <span>
                <h6>NATALIE</h6> <b>Natalie Moritz | CVD </b> <br /> Er mag Schokolade und Segeln und hat einen Hang zu sehr schicken Schuhen <br /><br /><br />
            </span>

            <div class="tooltip">
                <img src="imgz/blind.png" data-src="imgz/natalie_1.jpg" alt="" />
                <span class="tooltiptext">Natalie Moritz </span>
            </div>

            <ul class="zitty">
                <li>
                    <iframe width="200" height="113" scr="images/dummy.jpg" data-videoid="4MquVcR79pY" frameborder="0" allowfullscreen=allowfullscreen></iframe>
                    <span>
                        Labrassbanda | Natalie <br /> <br />
                        "...Natalie I schei&szlig; auf die <br />Und die Partnertherapie..."
                    </span>
                </li>
                <li>
                    <iframe width="200" height="113" scr="images/dummy.jpg" data-videoid="TilQ8BIHisw" frameborder="0" allowfullscreen=allowfullscreen></iframe>
                    <span>
                        Gilbert B&eacute;caud  | Nathalie <br /> <br />
                        "...Devant moi marchait Nathalie..."
                    </span>
                </li>
                <li>
                    <iframe width="200" height="113" scr="images/dummy.jpg" data-videoid="pE7Jo_sBhvU" frameborder="0" allowfullscreen=allowfullscreen></iframe>
                    <span>
                        The Killers | Believe Me Natalie <br /> <br />
                        "...And believe me, Natalie<br />Listen Natalie..."
                    </span>
                </li>
            </ul>

            <!--ENDE person 8-->

            <hr style="border:solid #ffffff 10px;" />

            <!--START person -->

            <span>
                <h6>OLAF</h6> <b>Olaf Schulz | CVD/Datenbanken </b> <br /> Einer der Ur-Ur-Ur-Gesteine, n&ouml; Ur...-Menschen der ZITTY <br /><br /><br />
            </span>

            <div class="tooltip">
                <img src="imgz/blind.png" data-src="imgz/olaf.jpeg" alt="" />
                <span class="tooltiptext">Olaf Schulz</span>
            </div>

            <ul class="zitty">
                <li>
                    <iframe width="200" height="113" scr="images/dummy.jpg" data-videoid="NnnAO4Ix744" frameborder="0" allowfullscreen=allowfullscreen></iframe>
                    <span>
                        Peter Hammill | Viking <br /> <br />
                        "...Olaf the White <br />and Sigurd the Powerful..."
                    </span>
                </li>
                <li>
                    <iframe width="200" height="113" scr="images/dummy.jpg" data-videoid="KBWEXz0JZZg" frameborder="0" allowfullscreen=allowfullscreen></iframe>
                    <span>
                        Tankard | Tankard roach motel <br /> <br />
                        "...Olaf found the scum <br />Panic in the band..."
                    </span>
                </li>
            </ul>

            <!--ENDE person -->

            <hr style="border:solid #ffffff 10px;" />

            <!--START person 9-->

            <span>
                <h6>JENNIFER</h6> <b>Jennifer Droma | IT </b> <br /> Sieht aus wie ein M&auml;dchen. Ist sie auch. Regelt aber jegliche Rechner-Chrashs wie ein Hardcore-Cracer-Kerl <br /><br /><br />
            </span>

            <div class="tooltip">
                <img src="imgz/blind.png" data-src="imgz/jennifer.jpg" alt="" />
                <span class="tooltiptext">Jennifer Droma</span>
            </div>

            <ul class="zitty">
                <li>
                    <iframe width="200" height="113" scr="images/dummy.jpg" data-videoid="M1cESSh-SqU" frameborder="0" allowfullscreen=allowfullscreen></iframe>
                    <span>
                        Donovan | Jennifer Juniper <br /> <br />
                        "...Jennifer Juniper, lives upon the hill <br />Jennifer Juniper, sitting very still ..."
                    </span>
                </li>
                <li>
                    <iframe width="200" height="113" scr="images/dummy.jpg" data-videoid="o6hWEk4z92M" frameborder="0" allowfullscreen=allowfullscreen></iframe>
                    <span>
                        The Smashing Pumpkins | Jennifer Ever <br /> <br />
                        "...Jennifer always tells me <br />Please dont be afraid..."
                    </span>
                </li>
                <li>
                    <iframe width="200" height="113" scr="images/dummy.jpg" data-videoid="F5DB9y4soq0" frameborder="0" allowfullscreen=allowfullscreen></iframe>
                    <span>
                        The Presidents Of The USA | Jennifer's Jacket <br /> <br />
                        "... Jennifer's jacket,Jennifer's jacket,<br />Jennifer's jacket is falling apart ..."
                    </span>
                </li>
                <li>
                    <iframe width="200" height="113" scr="images/dummy.jpg" data-videoid="dlvBPCeT92w" frameborder="0" allowfullscreen=allowfullscreen></iframe>
                    <span>
                        Hole | Jennifer's Body <br /> <br />
                        "...The pieces of Jennifer's body <br />Found pieces of Jennifer's body..."
                    </span>
                </li>
            </ul>

            <!--ENDE person -->

            <hr style="border:solid #ffffff 10px;" />

            <!--START person 10-->

            <span>
                <h6>ULRIKE</h6> <b>Ulrike Murach | Marketing </b> <br /> Sehr eigen, sehr wirr, extrem sehr vorrausschauend <br /><br /><br />
            </span>

            <div class="tooltip">
                <img src="imgz/blind.png" data-src="imgz/ulrike.jpg" alt="" />
                <span class="tooltiptext">Ulrike Murach</span>
            </div>

            <ul class="zitty">
                <li>
                    <iframe width="200" height="113" scr="images/dummy.jpg" data-videoid="omYL3WSuUEs" frameborder="0" allowfullscreen=allowfullscreen></iframe>
                    <span>
                        Hufi | Ulrike, komm zur&uuml;ck <br /> <br />
                        "...DinDangDo wo gehts zum Zoo <br />Ulrike bist Du irgendwo..."
                    </span>
                </li>
                <li>
                    <iframe width="200" height="113" scr="images/dummy.jpg" data-videoid="MvxKI5XeQ6M" frameborder="0" allowfullscreen=allowfullscreen></iframe>
                    <span>
                        Vicki Vomit | Die dicke Ulrike <br /> <br />
                        "Einst war Ulrike wundersch&ouml;n <br />ich wollte immer mit ihr gehn..."
                    </span>
                </li>
                <li>
                    <iframe width="200" height="113" scr="images/dummy.jpg" data-videoid="3xnRkuIhQk8" frameborder="0" allowfullscreen=allowfullscreen></iframe>
                    <span>
                        Heideboys | Ein Lied f&uuml;r Ulrike <br /> <br />
                        "...U u u  ulrike, du tolle Frau <br />du bist sexy witzig und schlau..."
                    </span>
                </li>
                <li>
                    <iframe width="200" height="113" scr="images/dummy.jpg" data-videoid="4di45oTC9qE" frameborder="0" allowfullscreen=allowfullscreen></iframe>
                    <span>
                        Antilopen Gang | Das Trojanische Pferd <br /> <br />
                        "...Ein bisschen wie bei Ulrike, <br /> bevor sie abtauchte..."
                    </span>
                </li>
            </ul>

Hier habe ich nachher/vorher, damit Du siehst, was ich geändert habe:

HTML:

                    <!--link zum video--><iframe width="200" height="113" scr="images/dummy.jpg" data-videoid="k3mJLCSgM1w" frameborder="0" allowfullscreen=allowfullscreen></iframe>
                    <!--link zum video--><!--<iframe width="200" height="113" src="https://www.youtube.com/embed/k3mJLCSgM1w" frameborder="0" allowfullscreen=allowfullscreen></iframe>-->

YotErra · 6. April 2017

Sempervivum, das ist atemberaubend - endlich wieder ein kleiner funke der menschlichen hilfsbereitschaft den ich fast schon vergessen habe... 10001³ x DANKE! Ich werde mich leider erst am Wochenende wieder ernsthaft damit beschäftigen können... Soweit ich es bisher verstehe (und ich bin wirklich nur ein sehr anfänglicher hobby-html/css fummler und habe deine beiträge seit gestern nur so nebenher überfliegen können) rufe ich weiterhin beide vorhandenen scripte auf:
<script src="jquery.js"></script>
<script src="jquery.unveil.js"></script>

behalte dann das für die img´s:
<script>
$(document).ready(function() {
$("img").unveil(200);
});
</script>

und füge zusätzlich das zweite script von dir hinzu?
(also das unter: "Lazyloading war dann relativ einfach, nachdem das Laden der Player mit der API fertig war" )

+ ergänze die <iframe> infos im html... richtig...? vermutlich...?

auf jeden fall baue ich irgend animated gif als irgend lade-ansicht anstatt des dummy.jpg - hier habe ich auch schon unglaublich tolle css möglichkeiten entdeckt, aber das werde ich auf gar keinen fall versuchen bei diesem projekt auch noch "kurz" einzubauen
und dann nur noch die fehlenden 40 personen reinbauen... und die zitate raussuchen - ein klacks!

magst du vielleicht deinen freunden/familie auch soetwas bauen? ich kann als dank sehr gerne helfen songs zu suchen+finden!

Sempervivum · 6. April 2017

rufe ich weiterhin beide vorhandenen scripte auf:
<script src="jquery.js"></script>
<script src="jquery.unveil.js"></script>

behalte dann das für die img´s:
<script>
$(document).ready(function() {
$("img").unveil(200);
});
</script>

und füge zusätzlich das zweite script von dir hinzu?

Nicht ganz. Wenn Du dir meinen Code genau ansiehst, erkennst Du, dass das unveil drin ist. D. h. Du brauchst nur das, was Du zuletzt gepostet hast, mit meinem zu ersetzen. Bis auf das Einziehen von jQuery und unveil, das musst Du natürlich beibehalten.

YotErra · 7. April 2017

...ich glaube es kaum, das ist als ob ich einen diktat auf chinesisch geschafft hätte - und zwar nur weil du diesen für mich geschrieben hast - vielen vielen VIELSTEN dank! http://yoterra.de/team100.html
...jetzt nur noch entspannt die listen-autisten-arbeit... (sollte ich je fertig werden wird die datei wieder "team.html" heißen - nur wenn du dir all die finalen protagonisten anschauen magst...)

gibt es in deinem für mich wirklich undurchdringlichem code eine einfache möglichkeit der verweildauer-zeitangabe für die platzhalter gifs in den iframes? (<iframe width="200" height="113" src="imgz/blind_02.gif"...) - damit sie länger sichtbar bleiben und erst verschwinden wenn die youtube-videos wirklich geladen wurden? bei den img´s funktioniert es prima, bei den iframes blinken die platzhalter nur sehr kurz auf und dann entstehen, zumindest bei mir, für einige sekunden leerräume. das ist aber letztendlich wirklich eine nichtigkeit...

ich denke dir!
und dein exotischer Name wurde tatsächlich auch schon vertont, wenn auch nur im titel:

Sempervivum · 8. April 2017

damit sie länger sichtbar bleiben und erst verschwinden wenn die youtube-videos wirklich geladen wurden? bei den img´s funktioniert es prima, bei den iframes blinken die platzhalter nur sehr kurz auf und dann entstehen, zumindest bei mir, für einige sekunden leerräume. das ist aber letztendlich wirklich eine nichtigkeit

Dafür sind wahrscheinlich zwei Tatsachen verantwortlich: Du rufst das unveil zweimal auf und Du rufst es für alle img-Tags auf, d. h. es wirkt auch auf die Bilder in den iFrames. Dort verschwinden dann die Bilder, weil das entspr. data-Attribut nicht vorhanden ist. Abhilfe einfach möglich, indem Du den Bildern, auf die unveil wirken soll, eine entspr. Klasse gibst, z. B. "unveil" und dann spezifisch dafür unveil aufrufst:

Code:

$("img.unveil").unveil(200);

Oder indem man prüft, ob das data-Attribut vorhanden ist:

Code:

$("img[data-src]").unveil(200);

Wahrscheinlich ist das zweite eher angebracht, denn dann brauchst Du das HTML nicht zu ändern.

Danke für das Video. Mein richtiger Vorname ist Ulrich, Du kannst ja mal forschen, ob Du ein Video damit findest. Wahrscheinlich schwierig, weil es diesen Vornamen in englisch sprachigen Ländern nicht gibt.

YotErra · 8. April 2017

...ich versuche das morgen zu regeln, heute geht nichts mehr rein...

einem lars ulrich sei dank ist dein name sogar recht gut vertreten - ist wohl ein nachname, aber hey - ulrich ist ulrich!

hier so auf die schnelle

"Weird Al" Yankovic - Don't Download This Song

„...Even Lars Urlich Know it's wrong“

MC Lars - Hurricane Fresh

„...Of Wolf and Ulrich, Sad But True, he lived there for a year or two. “

Deichkind - Illegale Fans

„Die Dixie-Klos vom Hurricane schenken wir Lars Ulrich“

Beginner - Kater
„Aber geht nicht, denn in meinem Schädel spielt Lars Ulrich Schlagzeug und ich hab noch Pegel“

Code Lyoko - Yumi i Ulrich (finde so schnell den text nicht)

und ein Ulrich Roski macht wohl charmantes, z.bsp: Der kleine Mann im Ohr

und hier noch speziell für Ulrich: Ulrich's Song (text im inhalt nicht gecheckt)

✔ Nachladen?

YotErra

Mitglied

Sempervivum

Erfahrenes Mitglied

Sempervivum

Erfahrenes Mitglied

Sempervivum

Erfahrenes Mitglied

Sempervivum

Erfahrenes Mitglied

YotErra

Mitglied

Sempervivum

Erfahrenes Mitglied

YotErra

Mitglied

Sempervivum

Erfahrenes Mitglied

YotErra

Mitglied

Neue Beiträge