Results 1 to 3 of 3

Thread: Using thumbnails for playing multiple YouTube videos

  1. #1
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,380
    Thanks
    31
    Thanked 148 Times in 142 Posts
    Blog Entries
    34

    Default Using thumbnails for playing multiple YouTube videos

    Using text links for playing (YouTube) videos is not always what website designers want, because the information contained in the text about the videos is not 'cool' or sufficient. That's why, on many sites, the links have the form of iframes looking like this:
    Code:
    <iframe style="width:160px; height: 145px;" src="http://www.youtube.com/embed/AVgbEkBWuqs?start=0&amp;autoplay=0&amp;rel=0&amp;showinfo=0&amp;autohide=0&amp;modestbranding=1&amp;vq=large" frameborder="0" allowfullscreen></iframe>
    But these 'iframe-links' have two major disadvantages:
    - if we have many of them on our page, it won't load fast enough;
    - if we make them too small (less than 220x220px), the videos won't play (message: 'video player is too small).

    Using (YouTube) thumbnails for our purpose is a much better idea, because
    (i) small images load faster than iframes,
    (ii) the size of videos (loaded in a YouTube-iframe) doesn't depend on the size of the thumbnails.

    YouTube thumbnails look like this:
    http://img.youtube.com/vi/VIDEO-ID/0.jpg, or http://img.youtube.com/vi/VIDEO-ID/1.jpg or http://img.youtube.com/vi/VIDEO-ID/2.jpg or http://img.youtube.com/vi/VIDEO-ID/3.jpg.

    So how can we use YouTube thumbnails for showing videos? Of course, we should not use the thumbnails for 'unhiding' hidden YouTube-iframes, because iframes (hidden or not) are a burden for loading time. What we should do is create a given iframe on the fly as soon as the thumnail corresponding to an iframe is clicked on.

    I created a script that just does that: it creates videos on the fly. I added some css that interacts with the script in such a way that
    (i) the thumbnails contain relevant text and
    (ii) the iframes replace (sort of) the corresponding thumbnails when the user hits them. Any thumbnail that has been replaced with an iframe will reappear when the iframe is closed (all iframes contain a close button created by the script).

    Demo and explanations here.

    Arie Molendijk.

  2. #2
    Join Date
    Jan 2009
    Location
    NH
    Posts
    356
    Thanks
    54
    Thanked 10 Times in 10 Posts

    Default

    That is a great help!

  3. #3
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,380
    Thanks
    31
    Thanked 148 Times in 142 Posts
    Blog Entries
    34

    Default

    03-21-2013:
    I made some major changements to the script and the HTML in order to fix a float:right issue for iframes with IE7-8.

Similar Threads

  1. Replies: 5
    Last Post: 10-07-2012, 09:31 AM
  2. Loading YouTube videos using the most recent YouTube embed code
    By molendijk in forum Submit a DHTML or CSS code
    Replies: 11
    Last Post: 05-28-2012, 11:04 PM
  3. make only one youtube video playing
    By bd0 in forum Flash
    Replies: 3
    Last Post: 06-27-2008, 02:23 AM
  4. playing videos
    By davidjmorin in forum JavaScript
    Replies: 1
    Last Post: 09-27-2007, 10:44 PM
  5. Replies: 5
    Last Post: 03-16-2007, 03:24 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •