如何使用此替代嵌入方法删除youtube链接？ （不是iframe）

Question

所以我有一个嵌入了100多个youtube视频的页面，并找到了一种嵌入视频的替代方式，这样它只会渲染视频缩略图，这会将页面加载减少到一小部分时间。

这是我使用的（在谷歌的某个地方找到它）

<div class="video-container"><div class="youtube-player" data-id=" youtube id "></div>

脚本，在您点击视频时将div更改为iframe

<script>

        /* Light YouTube Embeds by @labnol */
        /* Web: http://labnol.org/?p=27941 */

        document.addEventListener("DOMContentLoaded",
            function() {
                var div, n,
                    v = document.getElementsByClassName("youtube-player");
                for (n = 0; n < v.length; n++) {
                    div = document.createElement("div");
                    div.setAttribute("data-id", v[n].dataset.id);
                    div.innerHTML = labnolThumb(v[n].dataset.id);
                    div.onclick = labnolIframe;
                    v[n].appendChild(div);
                }
            });

        function labnolThumb(id) {
            var thumb = '<img src="https://i.ytimg.com/vi/ID/hqdefault.jpg">',
                play = '<div class="play"></div>';
            return thumb.replace("ID", id) + play;
        }

        function labnolIframe() {
            var iframe = document.createElement("iframe");
            var embed = "https://www.youtube.com/embed/ID?autoplay=1";
            iframe.setAttribute("src", embed.replace("ID", this.dataset.id));
            iframe.setAttribute("frameborder", "0");
            iframe.setAttribute("allowfullscreen", "1");
            this.parentNode.replaceChild(iframe, this);
        }

    </script>

css造型

<style>
            .youtube-player {
                position: relative;
                padding-bottom: 56.23%;
                /* Use 75% for 4:3 videos */
                height: 0;
                overflow: hidden;
                max-width: 100%;
                background: #000;
                margin: 5px;
            }

            .youtube-player iframe {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                z-index: 100;
                background: transparent;
            }

            .youtube-player img {
                bottom: 0;
                display: block;
                left: 0;
                margin: auto;
                max-width: 100%;
                width: 100%;
                position: absolute;
                right: 0;
                top: 0;
                border: none;
                height: auto;
                cursor: pointer;
                -webkit-transition: .4s all;
                -moz-transition: .4s all;
                transition: .4s all;
            }

            .youtube-player img:hover {
                -webkit-filter: brightness(75%);
            }

            .youtube-player .play {
                height: 72px;
                width: 72px;
                left: 50%;
                top: 50%;
                margin-left: -36px;
                margin-top: -36px;
                position: absolute;
                background: url("//i.imgur.com/TxzC70f.png") no-repeat;
                cursor: pointer;
            }

        </style>

如果可能的话，我希望将链接移回youtube（视频标题和youtube按钮上的手表），我不确定这些链接是否已过时，但我已经看到你可以将&modestbranding=1和&showinfo=0添加到iframe，但因为我使用不同的方法来嵌入视频，这是不可能的，但是我的编码知识仅限于HTML和CSS，你能看到添加到脚本中的任何方法来禁用这些选项吗？我对脚本一无所知，所以对于有知识的人来说这似乎是显而易见的，但是想到尝试添加这个......（它没有工作）

iframe.setAttribute("modestbranding", "1");
iframe.setAttribute("showinfo", "0");

Answer 1

这些是网址参数，将附加设置为iframe＆＃39; src属性的字符串附加在其中。

function labnolIframe() {
    var iframe = document.createElement("iframe");
    var embed = "https://www.youtube.com/embed/ID?autoplay=1&modestbranding=1&showinfo=0";
    ...