Widget:YouTube

Make a clickable link to a YouTube (or other external) video.

Normally you should use Template:YouTube which wraps this bit of low level infrastructure to provide more authoring convenience.

Parameters

 * id:YouTube video id or a complete URL specifying an external video
 * t:start time in seconds (default: 0, only applies to YouTube)
 * width:width of player in px (default: 425)
 * height:height of player in px (default: 355)
 * title:string for title bar (default YouTube title)
 * thumbnail:filename of static image (e.g., default: YouTube thumbnail for CC-BY videos, black screen for other licenses or external videos)
 * list:id of list of related videos (optional, only for YouTube)
 * index:index in the list of related videos (optional, only relevant if list parameter is set)
 * target:if non-blank, open in a new window

/*<![CDATA[*/ $(function { function getFileThumbnail(filename, h, w, $this) {    // canonicalize filename    filename = 'File:' + filename.replace(/^((file)|(image)|(media)):/i, '');    $.ajax({ url: window.wgServer + '/api.php', type: 'POST', data: { action: 'query', format: 'json', titles: filename, prop: 'imageinfo', iiprop: 'url|size', iiurlheight: h,       iiurlwidth: w      }, success: function(d) { var page, ii; if (d.query && d.query.pages) { for (page in d.query.pages) { if (d.query.pages[page].imageinfo && d.query.pages[page].imageinfo.length >= 1) { ii = d.query.pages[page].imageinfo[0]; $this.find('img:first') .attr('src', ii.thumburl) .attr('width', ii.thumbwidth) .attr('height', ii.thumbheight) .css('left', (w-ii.thumbwidth)/2 + 'px') .css('top', (h-ii.thumbheight)/2 + 'px'); }         }        }      }    })  }  function getYouTubeInfo(id, filename, h, w, $this) {    $.ajax({ url: 'https://www.googleapis.com/youtube/v3/videos?id=' + id + '&key=AIzaSyAQtYcfsqifV0XF_tLADxUeyUdlgqY65Tg&part=snippet,status,contentDetails,player,statistics' }).done(function(d) { var $did, iw, ih, img, thumbnails = []; if (d && d.items && d.items.length === 1 && d.items[0].status) { if (d.items[0].status.license === 'creativeCommon') { // find appropriate thumbnail if (d.items[0].snippet && d.items[0].snippet.thumbnails) { $.each(d.items[0].snippet.thumbnails, function(i, v) {             thumbnails.push([v.width, v.height, v.url]);            }); thumbnails.sort(function(a, b) {             return b[0] - a[0];  // reverse sort            }); // find the smallest thumbnail that would completely cover us           iw = thumbnails[0][0]; ih = thumbnails[0][1]; img = thumbnails[0][2]; // see if we can use something smaller for (i = 0; i < thumbnails.length; i++) { if ((thumbnails[i][0] >= w) && (thumbnails[i][1] >= h)) { iw = thumbnails[i][0]; ih = thumbnails[i][1]; img = thumbnails[i][2]; } else { break; }           }            $did = $('div[data-ytid="' + d.items[0].id + '"]'); if (!filename) { $did.find('img:first').attr('src', img); }           if (($did.find('.weYouTubeTitle').text.replace(/\s*/g, ) === ) && d.items[0].snippet.title) { $did.find('.weYouTubeTitle').text(d.items[0].snippet.title); }         }        }      }    });  }  $('.weYouTube').each(function { var h, w, t, l,       id = $.trim($(this).data('ytid')), isURL = /^https?:/i.test(id), img = $(this).data('img'), title = $(this).find('.weYouTubeTitle').text, filename = $(this).data('thumbnail'), target = $(this).data('target'); h = $(this).css('height').replace('px', ''); w = $(this).css('width').replace('px', ''); if (!isURL && !img) { $(this).data('img', '#'); // mark as in flight // if we need title or YouTube thumbnail, hit GoogleAPI if (!filename || !title) { getYouTubeInfo(id, filename, h, w, $(this)); }   }    if (filename) { getFileThumbnail(filename, h, w, $(this)); }   // optionally cause clicking to open in a new window if (target !== '') { $(this).parent.attr('target', '_blank'); }   if (isURL) { $(this).parent.attr('href', id); $(this).find('.weYouTubePlay img').attr('src', '/extensions/WE/images/start_play.png'); l = Math.round(w/2) - 20; } else { l = Math.round(w/2) - 70; }   // adjust position of start icon t = Math.round(h/2) - 30; $(this).find('.weYouTubePlay').css('top', t + 'px').css('left', l + 'px');

}); }); /*]]>*/    