Frage Was ist der effizienteste Weg, YouTube-Videos über jQuery bei einem Nutzerklick zu laden?


Ich versuche herauszufinden, welche Methode am effektivsten ist, um Videos bei einem Benutzerklick mit jQuery zu laden.

Um mehr Kontext dafür zu geben, werde ich etwa 30 Clips auf YouTube haben, die jeweils zwischen 30 und 60 Sekunden umfassen, und ich möchte sie dynamisch in ein div auf der rechten Seite der Seite laden, wenn der Benutzer die Themen und mögliche Videoclips auf der linken Seite.

Im Moment habe ich dieses HTML und jQuery eingerichtet. Es funktioniert, aber ich bin neugierig, ob es eine bessere Methode gibt:

<div class="wrapper">
    <div class="details_left">
        <div class="cluster">
            <a href="#" id="johnk" class="vid_trigger"><div class="title">The importance of demonstrating intellectual curiosity</div></a>
            <div class="role">John K: Summer Consultant, BCG</div>
            <div class="summary">Discussion on how curiousity is important to show in interviews because it leads to better answers on the job</div>
        </div>
    </div>
    <div class="details_right" id="video_container">
        video
    </div>   
</div>

Und die jQuery:

$('#johnk').click( function(){
    $('#video_container').html('<iframe width="425" height="349" src="http://www.youtube.com/embed/bMvRdr-mUOU?rel=0" frameborder="0" allowfullscreen </iframe>');
})

Um die Handcodierung zu reduzieren, klicken Sie auf .click () für jedes Video, das ich in Betracht ziehe, um ein assoziatives Array mit dem Code ids-> embed zu erstellen. Gibt es einen besseren Weg, die gleiche Funktionalität effizienter zu erreichen?

Vielen Dank im Voraus für alle Einsichten!


6
2018-06-05 04:07


Ursprung


Antworten:


Sie können die URL zu Ihrer Href hinzufügen und erhalten sie im Call Something Like:

In deinem HTML:

<a href="bMvRdr-mUOU" id="johnk" class="vid_trigger">

Jetzt in deinem JQuery:

$('.vid_trigger').click( function(e){
e.preventDefault();
var URL = $(this).attr('href');
var htm = '<iframe width="425" height="349" src="http://www.youtube.com/embed/' + URL + '?rel=0" frameborder="0" allowfullscreen ></iframe>';

    $('#video_container').html(htm);

return false;
});

13
2018-06-05 05:04



Sie könnten auch versuchen, dass jQuery die Eigenschaft iframe src ändert.

Möglicherweise treten Probleme mit dem Iframe in Internet Explorer auf. Diese Seite beschreibt das Problem: http://osdir.com/ml/youtube-api-gdata/2011-03/msg00369.html
Wenn Sie konditionales Scripting verwenden können, das die Flash-Einbettung anstelle des Iframes verwendet, wenn es sich in Internet Explorer befindet, ist dies möglicherweise der beste Weg.


1
2018-06-05 04:17



Benutzen Farbbox

Ein leichter, anpassbarer Leuchtkasten   Plugin für jQuery 1.3, 1.4 und 1.5   
Probe


1
2018-06-05 04:34