问题
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.
This is what I use (found it on google somewhere)
<div class="video-container"><div class="youtube-player" data-id=" youtube id "></div>
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 styling
<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>
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");
回答1:
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";
...
来源:https://stackoverflow.com/questions/41240594/how-can-i-remove-youtube-links-with-this-alternative-embedding-method-not-ifra