How to include Javascript below the footer, but only on a few pages

support
1

I want to include javascript below the footer and before the closing body tag, but only on a few pages. How can I do this?

Can use something like:

---
videos: true
---

in the frontmatter of the pages that need the script and then some code placed in the footer.html, like:

`</footer>`
 {{- Param.videos true -}}
`<script>document.addEventListener("DOMContentLoaded", function() {var div, n, v = document.getElementsByClassName("youtube"); 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-nocookie.com/embed/ID?autoplay=1&amp;rel=0"; iframe.setAttribute("src", embed.replace("ID", this.dataset.id)); iframe.setAttribute("frameborder", "0"); iframe.setAttribute("allowfullscreen", "1"); this.parentNode.replaceChild(iframe, this);}</script>`
{{ end }}
</body>
</html>

(btw…I know that the code doesn’t work, I just wanted to give an example of what I mean)

How can I do this?

2

@mickel1982, with is a good choice for this:

2 Likes
3

Thank you Rick.

So in the frontmatter area of the pages that need the script I place something like:

---
videos: true
---

And then in the footer.html, something like:

{{- with .Params.videos -}}<script>document.addEventListener("DOMContentLoaded", function() {var div, n, v = document.getElementsByClassName("youtube"); 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-nocookie.com/embed/ID?autoplay=1&amp;rel=0"; iframe.setAttribute("src", embed.replace("ID", this.dataset.id)); iframe.setAttribute("frameborder", "0"); iframe.setAttribute("allowfullscreen", "1"); this.parentNode.replaceChild(iframe, this);}</script>{{ end }}

Right?

EDIT: It works…

2 Likes