全屏弹出 window 用于多个嵌入视频

Question

我是 js 的新手，我发现 codepen 完全符合我的要求，只是它目前仅适用于 一个嵌入式视频。

我想要实现的是相同的，但有 6 个视频。

(function ($) {

    'use strict';

    $.fn.fitVids = function (options) {
        var settings = {
            customSelector: null,
            ignore: null
        };

        if (!document.getElementById('fit-vids-style')) {
            // appendStyles: https://github.com/toddmotto/fluidvids/blob/master/dist/fluidvids.js
            var head = document.head || document.getElementsByTagName('head')[0];
            var css = '.fluid-width-video-wrapper{width:100%;position:relative;padding:0;}.fluid-width-video-wrapper iframe,.fluid-width-video-wrapper object,.fluid-width-video-wrapper embed {position:absolute;top:0;left:0;width:100%;height:100%;}';
            var div = document.createElement("div");
            div.innerHTML = '<p>x</p><style id="fit-vids-style">' + css + '</style>';
            head.appendChild(div.childNodes[1]);
        }

        if (options) {
            $.extend(settings, options);
        }

        return this.each(function () {
            var selectors = [
        'iframe[src*="player.vimeo.com"]',
        'iframe[src*="youtube.com"]',
        'iframe[src*="youtube-nocookie.com"]',
        'iframe[src*="kickstarter.com"][src*="video.html"]',
        'object',
        'embed'
      ];

            if (settings.customSelector) {
                selectors.push(settings.customSelector);
            }

            var ignoreList = '.fitvidsignore';

            if (settings.ignore) {
                ignoreList = ignoreList + ', ' + settings.ignore;
            }

            var $allVideos = $(this).find(selectors.join(','));
            $allVideos = $allVideos.not('object object'); // SwfObj conflict patch
            $allVideos = $allVideos.not(ignoreList); // Disable FitVids on this video.

            $allVideos.each(function (count) {
                var $this = $(this);
                if ($this.parents(ignoreList).length > 0) {
                    return; // Disable FitVids on this video.
                }
                if (this.tagName.toLowerCase() === 'embed' && $this.parent('object').length || $this.parent('.fluid-width-video-wrapper').length) {
                    return;
                }
                if ((!$this.css('height') && !$this.css('width')) && (isNaN($this.attr('height')) || isNaN($this.attr('width')))) {
                    $this.attr('height', 9);
                    $this.attr('width', 16);
                }
                var height = (this.tagName.toLowerCase() === 'object' || ($this.attr('height') && !isNaN(parseInt($this.attr('height'), 10)))) ? parseInt($this.attr('height'), 10) : $this.height(),
                    width = !isNaN(parseInt($this.attr('width'), 10)) ? parseInt($this.attr('width'), 10) : $this.width(),
                    aspectRatio = height / width;
                if (!$this.attr('id')) {
                    var videoID = 'fitvid' + count;
                    $this.attr('id', videoID);
                }
                $this.wrap('<div class="fluid-width-video-wrapper"></div>').parent('.fluid-width-video-wrapper').css('padding-top', (aspectRatio * 100) + '%');
                $this.removeAttr('height').removeAttr('width');
            });
        });
    };
    // Works with either jQuery or Zepto
})(window.jQuery || window.Zepto);

// Init style shamelessly stolen from jQuery http://jquery.com
var Froogaloop = (function () {
    // Define a local copy of Froogaloop
    function Froogaloop(iframe) {
        // The Froogaloop object is actually just the init constructor
        return new Froogaloop.fn.init(iframe);
    }

    var eventCallbacks = {},
        hasWindowEvent = false,
        isReady = false,
        slice = Array.prototype.slice,
        playerDomain = '';

    Froogaloop.fn = Froogaloop.prototype = {
        element: null,

        init: function (iframe) {
            if (typeof iframe === "string") {
                iframe = document.getElementById(iframe);
            }

            this.element = iframe;

            // Register message event listeners
            playerDomain = getDomainFromUrl(this.element.getAttribute('src'));

            return this;
        },

        /*
         * Calls a function to act upon the player.
         *
         * @param {string} method The name of the Javascript API method to call. Eg: 'play'.
         * @param {Array|Function} valueOrCallback params Array of parameters to pass when calling an API method
         *                                or callback function when the method returns a value.
         */
        api: function (method, valueOrCallback) {
            if (!this.element || !method) {
                return false;
            }

            var self = this,
                element = self.element,
                target_id = element.id !== '' ? element.id : null,
                params = !isFunction(valueOrCallback) ? valueOrCallback : null,
                callback = isFunction(valueOrCallback) ? valueOrCallback : null;

            // Store the callback for get functions
            if (callback) {
                storeCallback(method, callback, target_id);
            }

            postMessage(method, params, element);
            return self;
        },

        /*
         * Registers an event listener and a callback function that gets called when the event fires.
         *
         * @param eventName (String): Name of the event to listen for.
         * @param callback (Function): Function that should be called when the event fires.
         */
        addEvent: function (eventName, callback) {
            if (!this.element) {
                return false;
            }

            var self = this,
                element = self.element,
                target_id = element.id !== '' ? element.id : null;


            storeCallback(eventName, callback, target_id);

            // The ready event is not registered via postMessage. It fires regardless.
            if (eventName != 'ready') {
                postMessage('addEventListener', eventName, element);
            } else if (eventName == 'ready' && isReady) {
                callback.call(null, target_id);
            }

            return self;
        },

        /*
         * Unregisters an event listener that gets called when the event fires.
         *
         * @param eventName (String): Name of the event to stop listening for.
         */
        removeEvent: function (eventName) {
            if (!this.element) {
                return false;
            }

            var self = this,
                element = self.element,
                target_id = element.id !== '' ? element.id : null,
                removed = removeCallback(eventName, target_id);

            // The ready event is not registered
            if (eventName != 'ready' && removed) {
                postMessage('removeEventListener', eventName, element);
            }
        }
    };

    /**
     * Handles posting a message to the parent window.
     *
     * @param method (String): name of the method to call inside the player. For api calls
     * this is the name of the api method (api_play or api_pause) while for events this method
     * is api_addEventListener.
     * @param params (Object or Array): List of parameters to submit to the method. Can be either
     * a single param or an array list of parameters.
     * @param target (HTMLElement): Target iframe to post the message to.
     */
    function postMessage(method, params, target) {
        if (!target.contentWindow.postMessage) {
            return false;
        }

        var url = target.getAttribute('src').split('?')[0],
            data = JSON.stringify({
                method: method,
                value: params
            });

        if (url.substr(0, 2) === '//') {
            url = window.location.protocol + url;
        }

        target.contentWindow.postMessage(data, url);
    }

    /**
     * Event that fires whenever the window receives a message from its parent
     * via window.postMessage.
     */
    function onMessageReceived(event) {
        var data, method;

        try {
            data = JSON.parse(event.data);
            method = data.event || data.method;
        } catch (e) {
            //fail silently... like a ninja!
        }

        if (method == 'ready' && !isReady) {
            isReady = true;
        }

        // Handles messages from moogaloop only
        if (event.origin != playerDomain) {
            return false;
        }

        var value = data.value,
            eventData = data.data,
            target_id = target_id === '' ? null : data.player_id,

            callback = getCallback(method, target_id),
            params = [];

        if (!callback) {
            return false;
        }

        if (value !== undefined) {
            params.push(value);
        }

        if (eventData) {
            params.push(eventData);
        }

        if (target_id) {
            params.push(target_id);
        }

        return params.length > 0 ? callback.apply(null, params) : callback.call();
    }


    /**
     * Stores submitted callbacks for each iframe being tracked and each
     * event for that iframe.
     *
     * @param eventName (String): Name of the event. Eg. api_onPlay
     * @param callback (Function): Function that should get executed when the
     * event is fired.
     * @param target_id (String) [Optional]: If handling more than one iframe then
     * it stores the different callbacks for different iframes based on the iframe's
     * id.
     */
    function storeCallback(eventName, callback, target_id) {
        if (target_id) {
            if (!eventCallbacks[target_id]) {
                eventCallbacks[target_id] = {};
            }
            eventCallbacks[target_id][eventName] = callback;
        } else {
            eventCallbacks[eventName] = callback;
        }
    }

    /**
     * Retrieves stored callbacks.
     */
    function getCallback(eventName, target_id) {
        if (target_id) {
            return eventCallbacks[target_id][eventName];
        } else {
            return eventCallbacks[eventName];
        }
    }

    function removeCallback(eventName, target_id) {
        if (target_id && eventCallbacks[target_id]) {
            if (!eventCallbacks[target_id][eventName]) {
                return false;
            }
            eventCallbacks[target_id][eventName] = null;
        } else {
            if (!eventCallbacks[eventName]) {
                return false;
            }
            eventCallbacks[eventName] = null;
        }

        return true;
    }

    /**
     * Returns a domain's root domain.
     * Eg. returns http://vimeo.com when http://vimeo.com/channels is sbumitted
     *
     * @param url (String): Url to test against.
     * @return url (String): Root domain of submitted url
     */
    function getDomainFromUrl(url) {
        if (url.substr(0, 2) === '//') {
            url = window.location.protocol + url;
        }

        var url_pieces = url.split('/'),
            domain_str = '';

        for (var i = 0, length = url_pieces.length; i < length; i++) {
            if (i < 3) {
                domain_str += url_pieces[i];
            } else {
                break;
            }
            if (i < 2) {
                domain_str += '/';
            }
        }

        return domain_str;
    }

    function isFunction(obj) {
        return !!(obj && obj.constructor && obj.call && obj.apply);
    }

    function isArray(obj) {
        return toString.call(obj) === '[object Array]';
    }

    // Give the init function the Froogaloop prototype for later instantiation
    Froogaloop.fn.init.prototype = Froogaloop.fn;

    // Listens for the message event.
    // W3C
    if (window.addEventListener) {
        window.addEventListener('message', onMessageReceived, false);
    }
    // IE
    else {
        window.attachEvent('onmessage', onMessageReceived);
    }

    // Expose froogaloop to the global object
    return (window.Froogaloop = window.$f = Froogaloop);

})();




////////////////////////////////////////
// Our Script 
////////////////////////////////////////
$(document).ready(function () {
    // Initiate FitVid.js
    $(".containiframeCeleb2").fitVids();
    $(".containiframeRiver2").fitVids();
    $(".containiframeBach").fitVids();
    $(".containiframeLouie").fitVids();
    $(".containiframeRiver1").fitVids();
    $(".containiframeCeleb1").fitVids();
    $(".containiframe").fitVids();

    // Iframe/player variables
    var iframe = $('#videoCeleb1')[0];
    var iframe = $('#videoRiver1')[0];
    var iframe = $('#videoLouie')[0];
    var iframe = $('#videoBach')[0];
    var iframe = $('#videoRiver2')[0];
    var iframe = $('#videoCeleb2')[0];
    var iframe = $('#video')[0];
    var player = $f(iframe);


// Open on play

    $('.play').click(function () {
        $('.content').css('left', 0)
        $('.content').addClass('show')
        player.api("play");

    })

    $('.playcelebrity1').click(function () {
        $('.content').css('left', 0)
        $('.content').addClass('show')
        player.api("playcelebrity1");

    })

    $('.playcottage1').click(function () {
        $('.content').css('left', 0)
        $('.content').addClass('show')
        player.api("playcottage1");

    })

    $('.playLouie').click(function () {
        $('.content').css('left', 0)
        $('.content').addClass('show')
        player.api("playLouie");

    })
    $('.playbachelourette').click(function () {
        $('.content').css('left', 0)
        $('.content').addClass('show')
        player.api("playbachelourette");

    })
    $('.playcottage2').click(function () {
        $('.content').css('left', 0)
        $('.content').addClass('show')
        player.api("playcottage2");

    })
    $('.playcelbrity2').click(function () {
        $('.content').css('left', 0)
        $('.content').addClass('show')
        player.api("playcelbrity2");

    })
    

    // Closes on click outside
    $('.content').click(function () {
        $('.content').removeClass('show')
        setTimeout(function () {
            $('.content').css('left', '-100%')
        }, 300);
        player.api("pause");
    })
});

/* Lazy-man Reset */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Fullscreen Section */

header {
    width: 100%;
    /* 100% height */
    height: 100vh;
    color: white;
    background: #2980b9;
    text-align: center;
    padding: 20px;
    /* Fancy flex-box centering */
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-display: flex;
    -webkit-align-items: center;
    -webkit-justify-content: center;
}

header h1 {
    font-size: 40px;
    font-family: 'Roboto';
    font-weight: 700;
    max-width: 700px;
    margin-bottom: 10px;
}

header p {
    font-family: 'Roboto Slab';
    font-weight: 400;
    font-size: 20px;
    max-width: 700px;
    margin-bottom: 20px;
    opacity: .65;
}

.play {
    background-image: url(https://img.youtube.com/vi/YDHFM2HmYe0/default.jpg);
    display: block;
    width: 120px;
    height: 90px;
    margin: 0 auto;
    /* Important for :after */
    position: relative;
}

.play:hover {
    background: #333;
    cursor: pointer;
}

.play:after {
    position: absolute;
    /* Centering */
    /* CSS Triangle */
}

.playcelebrity1 {
    background-image: url(https://img.youtube.com/vi/ebB0eoSY4yU/default.jpg);
    display: block;
    /* width: 500px;
    height: 297px;*/
    margin: 0 auto;
    /* Important for :after */
    position: relative;
}

.playcelebrity1:hover {
    background: #333;
    cursor: pointer;
}

.playcelebrity1:after {
    position: absolute;
    /* Centering */
    /* CSS Triangle */
}

.playcottage1 {
    background-image: url(https://img.youtube.com/vi/YDHFM2HmYe0/default.jpg);
    display: block;
    width: 120px;
    height: 90px;
    margin: 0 auto;
    /* Important for :after */
    position: relative;
}

.playcottage1:hover {
    background: #333;
    cursor: pointer;
}

.playcottage1:after {
    position: absolute;
    /* Centering */
    /* CSS Triangle */
}

.playLouie {
    background-image: url(https://img.youtube.com/vi/ol43MqHED9c/default.jpg);
    display: block;
    width: 120px;
    height: 90px;
    margin: 0 auto;
    /* Important for :after */
    position: relative;
}

.playLouie:hover {
    background: #333;
    cursor: pointer;
}

.playLouie:after {
    position: absolute;
    /* Centering */
    /* CSS Triangle */
}

.playbachelourette {
    background-image: url(https://img.youtube.com/vi/qXy5sCJj2wI/default.jpg);
    display: block;
    width: 120px;
    height: 90px;
    margin: 0 auto;
    /* Important for :after */
    position: relative;
}

.playbachelourette:hover {
    background: #333;
    cursor: pointer;
}

.playbachelourette:after {
    position: absolute;
    /* Centering */
    /* CSS Triangle */
}

.playcottage2 {
    background-image: url(https://img.youtube.com/vi/7OeoQqPqxBg/default.jpg);
    display: block;
    width: 120px;
    height: 90px;
    margin: 0 auto;
    /* Important for :after */
    position: relative;
}

.playcottage2:hover {
    background: #333;
    cursor: pointer;
}

.playcottage2:after {
    position: absolute;
    /* Centering */
    /* CSS Triangle */
}

.playcelbrity2 {
    background-image: url(https://img.youtube.com/vi/lk9tse44BMc/default.jpg);
    display: block;
    width: 120px;
    height: 90px;
    margin: 0 auto;
    /* Important for :after */
    position: relative;
}

.playcelbrity2:hover {
    background: #333;
    cursor: pointer;
}

.playcelbrity2:after {
    position: absolute;
    /* Centering */
    /* CSS Triangle */
}


/* Fullscreen Overlay */
.content {
    width: 100%;
    height: 100vh;
    /* 50% opacity black */
    background: rgba(0, 0, 0, .5);
    /* Stays locked on scroll */
    position: fixed;
    /* On top of the rest*/
    z-index: 2;
    /* Hidden */
    opacity: 0;
    /* No interference */
    left: -100%;
    /* CSS3 Transition */
    transition: opacity .5s;
    -webkit-transition: opacity .5s;
}


/* 90% width container */

.containiframeCeleb2 {
    width: 90%;
    /* Centering */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}

.containiframeRiver2 {
    width: 90%;
    /* Centering */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}

.containiframeLouie {
    width: 90%;
    /* Centering */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}


.containiframeCeleb1 {
    width: 90%;
    /* Centering */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}


.containiframe {
    width: 90%;
    /* Centering */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}



.close {
    width: 20px;
    fill: white;
    position: absolute;
    right: 0;
    /* Bring above video */
    top: -30px;
}

.close:hover {
    /* 50% opacity white */
    fill: rgba(255, 255, 255, 0.5);
    cursor: pointer;
}


/* Class to fade in overlay */

.show {
    opacity: 1;
}

   
    <title>FullScreen Vimeo Popup with Autoplay and CSS3 Transitions</title>


<body>
    <div class="content">



        <!--End of the new-->

        <div class="containiframeCeleb2">
            <!-- SVG Close (X) Icon -->
            <svg class="close" xmlns="http://www.w3.org/2000/svg" viewBox="39.2 22.3 25 24.5"><path d="M39.5,46.4c0.2,0.2,0.6,0.4,0.9,0.4c0.3,0,0.6-0.1,0.9-0.4l10.3-10.3L62,46.4c0.2,0.2,0.6,0.4,0.9,0.4c0.3,0,0.6-0.1,0.9-0.4c0.5-0.5,0.5-1.3,0-1.8L53.5,34.3l9.8-9.8c0.5-0.5,0.5-1.3,0-1.8c-0.5-0.5-1.3-0.5-1.8,0l-9.8,9.8l-9.8-9.8c-0.5-0.5-1.3-0.5-1.8,0c-0.5,0.5-0.5,1.3,0,1.8l9.8,9.8L39.5,44.6C39,45.1,39,45.9,39.5,46.4z"/></svg>
            <!-- Embedded video -->
            <iframe id="videoCeleb2" src="https://www.youtube.com/embed/lk9tse44BMc?ecver=1" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
        </div>

        <div class="containiframeRiver2">
            <!-- SVG Close (X) Icon -->
            <svg class="close" xmlns="http://www.w3.org/2000/svg" viewBox="39.2 22.3 25 24.5"><path d="M39.5,46.4c0.2,0.2,0.6,0.4,0.9,0.4c0.3,0,0.6-0.1,0.9-0.4l10.3-10.3L62,46.4c0.2,0.2,0.6,0.4,0.9,0.4c0.3,0,0.6-0.1,0.9-0.4c0.5-0.5,0.5-1.3,0-1.8L53.5,34.3l9.8-9.8c0.5-0.5,0.5-1.3,0-1.8c-0.5-0.5-1.3-0.5-1.8,0l-9.8,9.8l-9.8-9.8c-0.5-0.5-1.3-0.5-1.8,0c-0.5,0.5-0.5,1.3,0,1.8l9.8,9.8L39.5,44.6C39,45.1,39,45.9,39.5,46.4z"/></svg>
            <!-- Embedded video -->
            <iframe id="videoRiver2" src="https://www.youtube.com/embed/7OeoQqPqxBg?ecver=1" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
        </div>

        <div class="containiframeBach">
            <!-- SVG Close (X) Icon -->
            <svg class="close" xmlns="http://www.w3.org/2000/svg" viewBox="39.2 22.3 25 24.5"><path d="M39.5,46.4c0.2,0.2,0.6,0.4,0.9,0.4c0.3,0,0.6-0.1,0.9-0.4l10.3-10.3L62,46.4c0.2,0.2,0.6,0.4,0.9,0.4c0.3,0,0.6-0.1,0.9-0.4c0.5-0.5,0.5-1.3,0-1.8L53.5,34.3l9.8-9.8c0.5-0.5,0.5-1.3,0-1.8c-0.5-0.5-1.3-0.5-1.8,0l-9.8,9.8l-9.8-9.8c-0.5-0.5-1.3-0.5-1.8,0c-0.5,0.5-0.5,1.3,0,1.8l9.8,9.8L39.5,44.6C39,45.1,39,45.9,39.5,46.4z"/></svg>
            <!-- Embedded video -->
            <iframe id="videoBach" src="https://www.youtube.com/embed/qXy5sCJj2wI?ecver=1" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
        </div>

        <div class="containiframeLouie">
            <!-- SVG Close (X) Icon -->
            <svg class="close" xmlns="http://www.w3.org/2000/svg" viewBox="39.2 22.3 25 24.5"><path d="M39.5,46.4c0.2,0.2,0.6,0.4,0.9,0.4c0.3,0,0.6-0.1,0.9-0.4l10.3-10.3L62,46.4c0.2,0.2,0.6,0.4,0.9,0.4c0.3,0,0.6-0.1,0.9-0.4c0.5-0.5,0.5-1.3,0-1.8L53.5,34.3l9.8-9.8c0.5-0.5,0.5-1.3,0-1.8c-0.5-0.5-1.3-0.5-1.8,0l-9.8,9.8l-9.8-9.8c-0.5-0.5-1.3-0.5-1.8,0c-0.5,0.5-0.5,1.3,0,1.8l9.8,9.8L39.5,44.6C39,45.1,39,45.9,39.5,46.4z"/></svg>
            <!-- Embedded video -->
            <iframe id="videoLouie" src="https://www.youtube.com/embed/ol43MqHED9c?ecver=1" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
        </div>

        <div class="containiframeRiver1">
            <!-- SVG Close (X) Icon -->
            <svg class="close" xmlns="http://www.w3.org/2000/svg" viewBox="39.2 22.3 25 24.5"><path d="M39.5,46.4c0.2,0.2,0.6,0.4,0.9,0.4c0.3,0,0.6-0.1,0.9-0.4l10.3-10.3L62,46.4c0.2,0.2,0.6,0.4,0.9,0.4c0.3,0,0.6-0.1,0.9-0.4c0.5-0.5,0.5-1.3,0-1.8L53.5,34.3l9.8-9.8c0.5-0.5,0.5-1.3,0-1.8c-0.5-0.5-1.3-0.5-1.8,0l-9.8,9.8l-9.8-9.8c-0.5-0.5-1.3-0.5-1.8,0c-0.5,0.5-0.5,1.3,0,1.8l9.8,9.8L39.5,44.6C39,45.1,39,45.9,39.5,46.4z"/></svg>
            <!-- Embedded video -->
            <iframe id="videoRiver1" src="https://www.youtube.com/embed/YDHFM2HmYe0?ecver=1" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

        </div>

        <div class="containiframeCeleb1">
            <!-- SVG Close (X) Icon -->
            <svg class="close" xmlns="http://www.w3.org/2000/svg" viewBox="39.2 22.3 25 24.5"><path d="M39.5,46.4c0.2,0.2,0.6,0.4,0.9,0.4c0.3,0,0.6-0.1,0.9-0.4l10.3-10.3L62,46.4c0.2,0.2,0.6,0.4,0.9,0.4c0.3,0,0.6-0.1,0.9-0.4c0.5-0.5,0.5-1.3,0-1.8L53.5,34.3l9.8-9.8c0.5-0.5,0.5-1.3,0-1.8c-0.5-0.5-1.3-0.5-1.8,0l-9.8,9.8l-9.8-9.8c-0.5-0.5-1.3-0.5-1.8,0c-0.5,0.5-0.5,1.3,0,1.8l9.8,9.8L39.5,44.6C39,45.1,39,45.9,39.5,46.4z"/></svg>
            <!-- Embedded video -->
            <iframe id="videoCeleb1" src="https://www.youtube.com/embed/ebB0eoSY4yU?ecver=1" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
        </div>

        <div class="containiframe">
            <!-- SVG Close (X) Icon -->
            <svg class="close" xmlns="http://www.w3.org/2000/svg" viewBox="39.2 22.3 25 24.5"><path d="M39.5,46.4c0.2,0.2,0.6,0.4,0.9,0.4c0.3,0,0.6-0.1,0.9-0.4l10.3-10.3L62,46.4c0.2,0.2,0.6,0.4,0.9,0.4c0.3,0,0.6-0.1,0.9-0.4c0.5-0.5,0.5-1.3,0-1.8L53.5,34.3l9.8-9.8c0.5-0.5,0.5-1.3,0-1.8c-0.5-0.5-1.3-0.5-1.8,0l-9.8,9.8l-9.8-9.8c-0.5-0.5-1.3-0.5-1.8,0c-0.5,0.5-0.5,1.3,0,1.8l9.8,9.8L39.5,44.6C39,45.1,39,45.9,39.5,46.4z"/></svg>
            <!-- Embedded video -->
            <iframe id="video" src="https://www.youtube.com/embed/YDHFM2HmYe0?ecver=1" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
        </div>
    </div>

    <header>
        <div>
            <span class="play"> </span>
        </div>
        <div>
            <span class="playcelebrity1"> </span>
        </div>
        <div>
            <span class="playcottage1"> </span>
        </div>
        <div>
            <span class="playLouie"> </span>
        </div>
        <div>
            <span class="playbachelourette"> </span>
        </div>
        <div>
            <span class="playcottage2"> </span>
        </div>
        <div>
            <span class="playcelbrity2"> </span>

        </div>

    </header>

    <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
    <script src="js/index.js"></script>

</body>

</html>

这是我目前的进度 (jsfiddle)

Answer 1

我有一个项目，我应该嵌入多个视频。我就是这样做的：

我使用了 Bootstrap 模式：

<div id="videoModal" class="modal">
            <!-- Modal content -->
              <div class="modal-content">
                <span class="close">&times;</span>
                <iframe id="videoIframe" class="full-width height-480" 
  src="https://www.youtube.com/watch?v=UM-ZPAF2Dpw" frameborder="0" allowfullscreen></iframe>
                </div>
              </div>

只添加一次，然后在您的按钮中像这样传递 youtube 视频 ID：

<button onclick="showVideo('UM-ZPAF2Dpw')"><span class="glyphicon glyphicon-triangle-right"></span> Show Video 1</button>

您可以根据需要使用不同的视频 ID 设置任意多个按钮

在你的脚本文件中你需要有这个：

function showVideo(youtubeID){

var url = 'https://www.youtube.com/embed/' + youtubeID 
document.getElementById('videoIframe').src = url;


// Get the modal
var modal = document.getElementById('videoModal');
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

modal.style.display = "block"; 
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
    modal.style.display = "none";
    document.getElementById('videoIframe').src = '';

}
// When the user clicks anywhere outside of the modal, close it
    window.onclick = function(event) {
        if (event.target == modal) {
    modal.style.display = "none";
    document.getElementById('videoIframe').src = '';
    }
}
}

全屏弹出 window 用于多个嵌入视频

Full screen pop up window for multiple embedded videos

html

javascript

css

popup

codepen