uci-hugo-landingpage/static/js/youtube.js

50 lines
1.9 KiB
JavaScript

(function ($) {
$(document).bind("DOMContentLoaded",
function () {
var playBtn = '<i class="fa fa-play-circle-o play-button"></i>'
$('div[youtube_id]').each(function () {
if ($(this).attr('nothumb') !== "yes") {
var vid = $(this).attr('youtube_id');
var bgi = `style="background-image: url(https://i.ytimg.com/vi/${vid}/mqdefault.jpg)"`
var thumb = `<div class="thumb--yt" ${bgi} width="560" height="315">`
$(this).append(thumb).children().append(playBtn).click(insertIframe).fitToWindow()
} else { // if image thumbs turned off
insertIframe.call(this)
}
})
})
function insertIframe() {
var $box = $(this).parent()
var id = $box.attr('youtube_id')
var autoplay = "autoplay=1&"
if (!id) { // image thumb is off not called by thumb so don't need parent
$box = $(this)
id = $box.attr('youtube_id')
autoplay = ""
}
var mw = $box.attr('maxWidth');
var wp = $box.attr('wPad');
var start = $box.attr("start") || 1
var list = ""
if ($box.attr("list")) { list = `&list=${$box.attr("list")}` }
var url = `https://www.youtube.com/embed/${id}?${autoplay}start=${start}`
var vIframe = `<iframe width = "560" height = "315" src ="${url}${list}" frameborder = "0" allowfullscreen></iframe>`
$box.html(vIframe).children().fitToWindow($box.data("maxWidth") || mw, $box.data("wPad") || wp)
}
}(jQuery));
// TODO grab the video title as well as the thumb for use in thumb display
// only works if server allows cross domain like s3
//http://stackoverflow.com/questions/1760231/how-do-i-get-the-title-of-a-youtube-video-if-i-have-the-video-id
// #var ytApiKey = "...";
// #var videoId = "ylLzyHk54Z0";
// #$.get("https://www.googleapis.com/youtube/v3/videos?part=snippet&id=" + videoId + "&key=" + ytApiKey, function(data) {
// #alert(data.items[0].snippet.title);
// # });