PHPFixing
  • Privacy Policy
  • TOS
  • Ask Question
  • Contact Us
  • Home
  • PHP
  • Programming
  • SQL Injection
  • Web3.0

Tuesday, November 29, 2022

[FIXED] How to get a YouTube thumbnail from a YouTube iframe?

 November 29, 2022     iframe, javascript, jquery, youtube     No comments   

Issue

For instance I have a blog post that has the following iframe.

<iframe width="420" height="315" src="//www.youtube.com/embed/1sIWez9HAbA" frameborder="0" allowfullscreen></iframe>

How can I extract the thumbnail from this iframe?


Solution

YouTube thumbnails

YouTube thumbnails can be found in this standard path:

http://img.youtube.com/vi/[video-id]/[thumbnail-number].jpg
  • [video-id] is the YouTube video ID, e.g. 1sIWez9HAbA.
  • [thumbnail-number] is the number of the thumbnail of the 4 each video usually has, e.g. 0.

Getting the thumbnail from an iframe

So, based on the iframe's src attribute you may construct the URL of the thumbnail directly.

For example, using jQuery:

var iframe           = $('iframe:first');
var iframe_src       = iframe.attr('src');
var youtube_video_id = iframe_src.match(/youtube\.com.*(\?v=|\/embed\/)(.{11})/).pop();

if (youtube_video_id.length == 11) {
    var video_thumbnail = $('<img src="//img.youtube.com/vi/'+youtube_video_id+'/0.jpg">');
    $(body).append(video_thumbnail);
}

Note this example checks the URL of the iframe for a valid YouTube video ID and assumes it to be 11 characters long, which is the de facto standard.

See jsFiddle Demo



Answered By - Boaz
Answer Checked By - Marie Seifert (PHPFixing Admin)
  • Share This:  
  •  Facebook
  •  Twitter
  •  Stumble
  •  Digg
Newer Post Older Post Home

0 Comments:

Post a Comment

Note: Only a member of this blog may post a comment.

Total Pageviews

Featured Post

Why Learn PHP Programming

Why Learn PHP Programming A widely-used open source scripting language PHP is one of the most popular programming languages in the world. It...

Subscribe To

Posts
Atom
Posts
Comments
Atom
Comments

Copyright © PHPFixing