docker
/
docs
mirror of https://github.com/docker/docs.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

hugo: move youtube script out of shortcode template 

Signed-off-by: David Karlsson <35727626+dvdksn@users.noreply.github.com>
This commit is contained in:
David Karlsson 2024-07-04 11:10:48 +02:00
parent a9d194808d
commit 92c31e093d
2 changed files with 54 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
layouts/_default/baseof.html
View File

@ -44,6 +44,59 @@
</div>
</main>
<footer>{{ partialCached "footer.html" . }}</footer>
{{ with (.Store.Get "youtube") }}
<script>
(function() {
var tag = document.createElement('script');
tag.id = "youtube-iframe-api";
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
window.onYouTubeIframeAPIReady = function() {
var youtubeDivs = document.querySelectorAll(".youtube-video");
for (var i = 0; i < youtubeDivs.length; i++) {
createPlayer(youtubeDivs[i].id, youtubeDivs[i].dataset.videoId);
}
}
function createPlayer(domElementId, videoId) {
new YT.Player(domElementId, {
width: "100%",
height: "100%",
videoId: videoId,
playerVars: {
'rel': 0,
'iv_load_policy': 3,
'enablejsapi': 1,
'origin': window.location.origin
},
events: {
'onStateChange': function (event) {
onPlayerStateChange(event, videoId);
}
}
});
}
function onPlayerStateChange(event, videoId) {
if (window.heap === undefined) return;
var properties = {
video_id: videoId,
page_path: window.location.pathname,
page_title: document.title,
};
if (event.data == YT.PlayerState.PLAYING) {
heap.track("Video Play", properties);
} else if (event.data == YT.PlayerState.PAUSED) {
heap.track("Video Paused", properties);
}
}
})();
</script>
{{ end }}
</body>
</html>

56
layouts/shortcodes/youtube-embed.html
View File

@ -1,56 +1,2 @@
{{- .Page.Store.Set "youtube" true -}}
<div id="youtube-player-{{ .Get 0 }}" data-video-id="{{ .Get 0 }}" class="youtube-video aspect-video w-full"></div>
{{ if page.Scratch.Get "youtube-embed" | default "incomplete" | ne "setup" }}
{{ page.Scratch.Set "youtube-embed" "setup" }}
<script>
(function() {
var tag = document.createElement('script');
tag.id = "youtube-iframe-api";
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
window.onYouTubeIframeAPIReady = function() {
var youtubeDivs = document.querySelectorAll(".youtube-video");
for (var i = 0; i < youtubeDivs.length; i++) {
createPlayer(youtubeDivs[i].id, youtubeDivs[i].dataset.videoId);
}
}
function createPlayer(domElementId, videoId) {
new YT.Player(domElementId, {
width: "100%",
height: "100%",
videoId: videoId,
playerVars: {
'rel': 0,
'iv_load_policy': 3,
'enablejsapi': 1,
'origin': window.location.origin
},
events: {
'onStateChange': function (event) {
onPlayerStateChange(event, videoId);
}
}
});
}
function onPlayerStateChange(event, videoId) {
if (window.heap === undefined) return;
var properties = {
video_id: videoId,
page_path: window.location.pathname,
page_title: document.title,
};
if (event.data == YT.PlayerState.PLAYING) {
heap.track("Video Play", properties);
} else if (event.data == YT.PlayerState.PAUSED) {
heap.track("Video Paused", properties);
}
}
})();
</script>
{{ end }}