Ankündigung

Einklappen
Keine Ankündigung bisher.

Hinzufügen von Attributen von iframes (Youtube)

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Hinzufügen von Attributen von iframes (Youtube)

    Hallöle,

    ich möchte folgendes tun und weiß nicht wie ich das anstellen soll:

    Da ich WP-Rocket verwende und gerne die Einstellung "Lazyload für Videos" aktivieren möchte, muss ich dennoch bestimmte Videos davon ausschließen. Bei WP-Rocket angefragt kann ich das mit data-no-lazy="true" lösen, indem ich dieses Attribut den iframes hinzufüge – dass jedoch dynamisch bzw. nachdem das Video schon eingebeddet wurde.

    Meine Frage also:
    Wie kann ich per Script ein Attribut in ein bestehendes iframe "im Nachhinein" einfügen, abhängig von einer class (damit ich das nur bei bestimmten iframes hinzufügen lasse?


  • #2
    Was bedeutet "im Nachhinein"?

    Mit Javascript geht das. (Ungetestet mit jquey)
    HTML-Code:
    $("#myiframe").attr("data-no-lazy", "true");

    Kommentar


    • #3
      Zitat von jonas3344 Beitrag anzeigen
      Was bedeutet "im Nachhinein"?

      Mit Javascript geht das. (Ungetestet mit jquey)
      HTML-Code:
      $("#myiframe").attr("data-no-lazy", "true");
      Erstmal danke für deine Antwort.

      Mit "Nachhinein" meine ich einfach, dass wenn das Video schon eingebeddet wurde vom Redakteur und ich "im Nachhinein" mit einem Script noch das iframe "modifiziere".
      Ich habe noch wahrscheinlich vergessen zu erwähnen, dass der DOM bisher so aussieht:

      <li data-content="trailer" id="trailer-class" class="selected" style="">
      <iframe width="560" height="315" src="https://www.youtube.com/embed/XX5hvIX3Vk4" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen="" data-rocket-lazyload="fitvidscompatible" data-lazy-src="https://www.youtube.com/embed/XX5hvIX3Vk4" data-gtm-yt-inspected-8234157_65="true" id="930056441" class="lazyloaded" data-was-processed="true"></iframe>
      <li>

      Ich möchte dementsprechend NUR die iframes "modifizieren", die in dem "li" mit der "class="nolazy" stehen.

      Kommentar


      • #4
        Ja genau, in meinem Beispiel ist das eine ID (#). Mit Klassen gehts natürlich auch. Geht auch ohne jQuery mit Vanilla-Javascript.

        Wenn du beim Aufrufen der Seite aber schon weisst ob ein Video das Attribut braucht oder nicht kannst du das auch Serverseitig machen. Ich hab halt keine Ahnung wie deine Seite aufgebaut ist, was für Technologien du verwendest und wie du feststellst ob ein iframe das Attribut braucht oder nicht.

        Kommentar


        • #5
          Zitat von jonas3344 Beitrag anzeigen
          Ja genau, in meinem Beispiel ist das eine ID (#). Mit Klassen gehts natürlich auch. Geht auch ohne jQuery mit Vanilla-Javascript.

          Wenn du beim Aufrufen der Seite aber schon weisst ob ein Video das Attribut braucht oder nicht kannst du das auch Serverseitig machen. Ich hab halt keine Ahnung wie deine Seite aufgebaut ist, was für Technologien du verwendest und wie du feststellst ob ein iframe das Attribut braucht oder nicht.
          Danke dir!

          Wie gesagt, alle iframes innerhalb des Listenpunkts "li" mit der class "nolazy" brauchen das Attribut. Dafür brauch ich ein Script

          Kommentar


          • #6
            Jo, das bringst du hin mit dem Hinweis, den ich dir oben gegeben habe.

            Kommentar


            • #7
              Zitat von jonas3344 Beitrag anzeigen
              Jo, das bringst du hin mit dem Hinweis, den ich dir oben gegeben habe.
              Ok, ich hab jetzt ein paar Sachen versucht, aber die gingen nicht :/ Mein Aufbau sieht gerade so aus – das iframe wird über die PHP-Variable eingefügt (CMS: Wordpress):


              HTML-Code:
              <li data-content="trailer" id="trailer-id">
                 <?php the_field('trailer'); ?>
              </li>
              <script> $("li#trailer-id > iframe").attr("data-no-lazy", "true"); </script>
              Bin leider Javascript-technisch wirklich ein Noob :/

              Kommentar


              • #8
                Wieso nimmst du hier die ID "trailer-id"? Du willst das Attribut doch allen iframes übergeben, die sich im li mit der Klasse "nolazy" befinden, also müsste es - wenn überhaupt - doch "li.nolazy > iframe" sein. Das li kann man aber weglassen -> ".nolazy > iframe"

                Kommentar

                Lädt...
                X