Fast and Simple youtube embedding

You can embed as many videos as you want and it still be fast.

HTML:

  <div class="video_name">Test video</div>
   <div class="video" style="background-color:#ccc; width:420px; height:315px;">
      <a href="http://www.youtube.com/watch?v=VIDEO_CODE" class="youtube"></a>
  </div>

JS:

<script type="text/javascript">
    function getYoutubeID(url) {
        var id = url.match("[\\?&]v=([^&#]*)");
        id = id[1];
        return id;
    };
    $('a.youtube').each(function() {
        var id = getYoutubeID( this.href );
        this.id = id;
        var thumb_url = "http://img.youtube.com/vi/"+id+"/0.jpg";
        $('<img width="100%" src="'+thumb_url+'" />').appendTo($(this.parentNode));

    });

    $('.video').on('click', function(e) {
        var link = $(this).find('a')[0];
        var id = getYoutubeID( link.href );
        $(this).html('<iframe width="420" height="315" src="//www.youtube.com/embed/'+ id +'?autoplay=1" frameborder="0" allowfullscreen></iframe>').css('background', 'none');
    });
</script>

Поделиться с друзьями

Френдинг

 

Comments

No comments so far.

Leave a Reply

 
(will not be published)
 
 
Comment