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

Question

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

这是我用的（在 google 某处找到的）

<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

这些是 URL 参数，将它们附加到设置为 iframe 的 src 属性的字符串。

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