YouTube API 不适用于 iPad/iPhone/非 Flash 设备

<div id="tabs2">
<img class='thumb' src='http://i2.cdnds.net/11/34/odd_alan_partridge_bio_cover.jpg'><iframe id="frame1" width="640" height="390" frameborder="0" title="WW91VHViZSDop4bpopHmkq3mlL7lmag="type="text/html"src="http://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1"></iframe></div>
<img class='thumb' src='http://i2.cdnds.net/11/34/odd_alan_partridge_bio_cover.jpg'><iframe id="frame2" width="640" height="390" frameborder="0" title="WW91VHViZSDop4bpopHmkq3mlL7lmag="type="text/html"src="http://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1"></iframe></div></div>

#tabs2 div {位置:相对；}/* 出于安全原因，元素不能放置在框架上 *//*.拇指{位置:绝对；}*/.玩 {边框:3px 纯红色；}

function getFrameID(id) {var elem = document.getElementById(id);如果(元素){if (/^iframe$/i.test(elem.tagName)) 返回 id；//帧，OK//else: 寻找框架var elems = elem.getElementsByTagName("iframe");如果(！elems.length)返回null；//没有找到iframe，失败for (var i = 0; i < elems.length; i++) {if (/^https?://(?:www.)?youtube(?:-nocookie)?.com(/|$)/i.test(elems[i].src));}元素 = 元素[i];//唯一的，或者最好的iFrame如果(elem.id)返回elem.id；//已有ID，返回//else: 创建一个新的IDdo {//保持后缀 `-frame` 直到 ID 唯一id += "-frame";} while (document.getElementById(id));elem.id = id;返回标识；}//如果没有元素，则返回 null.返回空值；}//定义 YT_ready 函数.var YT_ready = (function() {var onReady_funcs = [],api_isReady = 假；/* @param func function 准备执行的函数* @param func Boolean 如果为真，则执行所有队列函数* @param b_before Boolean 如果为真，函数将添加到第一个队列中的位置*/返回函数(函数，b_before){如果(函数 === 真){api_isReady = 真；for (var i = 0; i < onReady_funcs.length; i++) {//从数组中删除第一个 func，并执行 funconReady_funcs.shift()();}}否则 if (typeof func == "function") {如果(api_isReady)函数()；否则 onReady_funcs[b_before ?"unshift" : "推"](func);}}})();//当 API 完全加载时会调用这个函数函数 onYouTubePlayerAPIReady() {YT_ready(真)}var 玩家 = {};//定义一个播放器存储对象，以启用以后的函数调用，//无需再次创建新的类实例.YT_ready(函数() {$(".thumb + iframe[id]").each(function() {var 标识符 = this.id;var frameID = getFrameID(标识符);if (frameID) {//如果框架存在玩家[frameID] = new YT.Player(frameID, {事件:{"onReady": createYTEvent(frameID, 标识符)}});}});});//返回一个启用多个事件的函数函数 createYTEvent(frameID, 标识符) {返回函数(事件){var player = 玩家 [frameID];//播放器对象var the_div = $('#'+标识符).parent();the_div.children('.thumb').click(function() {var $this = $(this);$this.fadeOut().next().addClass('play');if ($this.next().hasClass('play')) {播放器.playVideo();}});}}//加载 YouTube Frame API(function(){//关闭，不泄漏到作用域var s = document.createElement("script");s.src = "http://www.youtube.com/player_api";/* 加载播放器 API*/var before = document.getElementsByTagName("script")[0];before.parentNode.insertBefore(s, before);})();

<div id="tabs2">
    <div>
    <img class='thumb' src='http://i2.cdnds.net/11/34/odd_alan_partridge_bio_cover.jpg'>
    <iframe id="frame1" width="640" height="390" frameborder="0" title="WW91VHViZSB2aWRlbyBwbGF5ZXI="type="text/html"src="http://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1"></iframe>
    </div>

    <div>
        <img class='thumb' src='http://i2.cdnds.net/11/34/odd_alan_partridge_bio_cover.jpg'>
   <iframe id="frame2" width="640" height="390" frameborder="0" title="WW91VHViZSB2aWRlbyBwbGF5ZXI="type="text/html"src="http://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1"></iframe>
    </div>
</div>

#tabs2 div {
    position: relative;
}
/* For security reasons, an element cannor be placed over a frame */
/*.thumb {
    position: absolute;
}*/    
.play {
    border: 3px solid red;
}

function getFrameID(id) {
    var elem = document.getElementById(id);
    if (elem) {
        if (/^iframe$/i.test(elem.tagName)) return id; //Frame, OK
        // else: Look for frame
        var elems = elem.getElementsByTagName("iframe");
        if (!elems.length) return null; //No iframe found, FAILURE
        for (var i = 0; i < elems.length; i++) {
            if (/^https?://(?:www.)?youtube(?:-nocookie)?.com(/|$)/i.test(elems[i].src)) break;
        }
        elem = elems[i]; //The only, or the best iFrame
        if (elem.id) return elem.id; //Existing ID, return it
        // else: Create a new ID
        do { //Keep postfixing `-frame` until the ID is unique
            id += "-frame";
        } while (document.getElementById(id));
        elem.id = id;
        return id;
    }
    // If no element, return null.
    return null;
}

// Define YT_ready function.
var YT_ready = (function() {
    var onReady_funcs = [],
        api_isReady = false;
/* @param func function     Function to execute on ready
         * @param func Boolean      If true, all qeued functions are executed
         * @param b_before Boolean  If true, the func will added to the first
                                     position in the queue*/
    return function(func, b_before) {
        if (func === true) {
            api_isReady = true;
            for (var i = 0; i < onReady_funcs.length; i++) {
                // Removes the first func from the array, and execute func
                onReady_funcs.shift()();
            }
        }
        else if (typeof func == "function") {
            if (api_isReady) func();
            else onReady_funcs[b_before ? "unshift" : "push"](func);
        }
    }
})();
// This function will be called when the API is fully loaded

function onYouTubePlayerAPIReady() {
    YT_ready(true)
}

var players = {};
//Define a player storage object, to enable later function calls,
//  without having to create a new class instance again.
YT_ready(function() {
    $(".thumb + iframe[id]").each(function() {
        var identifier = this.id;
        var frameID = getFrameID(identifier);
        if (frameID) { //If the frame exists
            players[frameID] = new YT.Player(frameID, {
                events: {
                    "onReady": createYTEvent(frameID, identifier)
                }
            });
        }
    });
});

// Returns a function to enable multiple events
function createYTEvent(frameID, identifier) {
    return function (event) {
        var player = players[frameID]; // player object
        var the_div = $('#'+identifier).parent();
        the_div.children('.thumb').click(function() {
            var $this = $(this);
            $this.fadeOut().next().addClass('play');
            if ($this.next().hasClass('play')) {
                player.playVideo();
            }
        });
    }
}
// Load YouTube Frame API
(function(){ //Closure, to not leak to the scope
  var s = document.createElement("script");
  s.src = "http://www.youtube.com/player_api"; /* Load Player API*/
  var before = document.getElementsByTagName("script")[0];
  before.parentNode.insertBefore(s, before);
})();