Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
I copied and pasted the script and CSS onto my site into the appropriate areas,
It’s important for us to know where you pasted the script.
both css and the script i used went into the head. (now the site is http://www.renaissanceeuropeanspa.com).
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
What was the script? So that we know what to look for
Andrew, thanks for the reply. The example I am following is from (http://www.labnol.org/internet/light-youtube-embeds/27941/).
Script below:
(function() {
var v = document.getElementsByClassName("youtube-player");
for (var n = 0; n < v.length; n++) {
var p = document.createElement("div");
p.innerHTML = labnolThumb(v[n].dataset.id);
p.onclick = labnolIframe;
v[n].appendChild(p);
}
})();
function labnolThumb(id) {
return '<img class="youtube-thumb" src="//i.ytimg.com/vi/' + id + '/hqdefault.jpg"><div class="play-button"></div>';
}
function labnolIframe() {
var iframe = document.createElement("iframe");
iframe.setAttribute("src", "//www.youtube.com/embed/" + this.parentNode.dataset.id + "?autoplay=1&autohide=2&border=0&wmode=opaque&enablejsapi=1&controls=0&showinfo=0");
iframe.setAttribute("frameborder", "0");
iframe.setAttribute("id", "youtube-iframe");
this.parentNode.replaceChild(iframe, this);
}
I posted this script inline into my <head>. I’ve tried several variants of this, modifying the script with my video ID, into and out of text widgets, and still no luck 🙁 Any ideas?
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
I don’t see the element with the class “youtube-player” on the Home page. You can search too here: view-source:http://www.renaissanceeuropeanspa.com/
I have it disabled right now. But when I was trying to congigure it, I inserted the HTML into a text widget, the CSS, and the script into the head with no results. I will try again right now..
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Try putting that JavaScript at the bottom of your page, before the </body> tag. If you put it at the top then it will run before the page has loaded.
I tried that, and putting the script directly in the text widget with no luck :/
hey Andrew,
Finally got it working! The problem was my thumbnail images weren’t loading properly. Here is my version of the script I used (just changed the thumb string names from original script):
<script>
(function() {
var v = document.getElementsByClassName("youtube-player");
for (var n = 0; n < v.length; n++) {
var p = document.createElement("div");
p.innerHTML = labnolThumb(v[n].dataset.id);
p.onclick = labnolIframe;
v[n].appendChild(p);
}
})();
function labnolThumb(id) {
return '<img class="youtube-thumb" src="https://img.youtube.com/vi/' + id + '/0.jpg"><div class="play-button"></div>';
}
function labnolIframe() {
var iframe = document.createElement("iframe");
iframe.setAttribute("src", "//www.youtube.com/embed/" + this.parentNode.dataset.id + "?autoplay=1&autohide=2&border=0&wmode=opaque&enablejsapi=1&controls=0&showinfo=0");
iframe.setAttribute("frameborder", "0");
iframe.setAttribute("id", "youtube-iframe");
this.parentNode.replaceChild(iframe, this);
}
</script>
Thanks for the help, I appreciate it.
