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

问题描述

因此，我在一个页面上嵌入了100多个youtube视频，并找到了一种嵌入视频的替代方法，使其仅呈现视频的缩略图，从而将页面加载量减少了一小部分时间。

So I've got a page with 100+ youtube videos embedded and found an alternative way of embedding the videos so that it only renders the thumbnail of video, this reduces the page load to a fraction of the time.

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

This is what I use (found it on google somewhere)

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

脚本，当您单击视频时将div更改为iframe

script to change the div to an iframe when you click on the video

<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，您可以看到添加到禁用这些选项的脚本？我对脚本一无所知，所以这对有知识的人来说似乎很明显，但我想我想添加一下...（没用）

I'm looking to remove the links back to youtube if possible (video title and the watch on youtube button), I'm not sure if these are now outdated but I've seen you could add &modestbranding=1 and &showinfo=0 to the iframe but because I'm using a different method to embed the videos this isn't possible, however my coding knowledge is limited to only HTML and CSS, can you see any way of adding to the script to disable these options? i don't know anything about script so this may seem obvious to someone with knowledge but thought id try adding this... (it didn't work)

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

推荐答案

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

These are URL parameters, append them the the string that gets set as the iframe's src attribute.

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

这篇关于如何使用此替代嵌入方法删除YouTube链接？ （不是iframe）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！