add play button to jumbotron if video is not playing
This commit is contained in:
parent
9f0fd3337b
commit
f1ef2f812b
|
@ -9,6 +9,7 @@
|
||||||
<div class="video_container">
|
<div class="video_container">
|
||||||
<video
|
<video
|
||||||
class="jumbotron_video"
|
class="jumbotron_video"
|
||||||
|
id="jumbotron_video"
|
||||||
src="{{ .Site.Data.jumbotron.backgroundVideo }}"
|
src="{{ .Site.Data.jumbotron.backgroundVideo }}"
|
||||||
autoplay mute loop>
|
autoplay mute loop>
|
||||||
</video>
|
</video>
|
||||||
|
@ -25,6 +26,28 @@
|
||||||
{{ end }}
|
{{ end }}
|
||||||
">{{ .Site.Data.jumbotron.title }}</h1>
|
">{{ .Site.Data.jumbotron.title }}</h1>
|
||||||
<h2>{{ .Site.Data.jumbotron.subtitle }}</h2>
|
<h2>{{ .Site.Data.jumbotron.subtitle }}</h2>
|
||||||
|
{{ if .Site.Data.jumbotron.backgroundVideo }}
|
||||||
|
<ul id="play_button_container" style="display: none">
|
||||||
|
<li>
|
||||||
|
<a title="Play" style="border-radius: 100%; width: 32px; height: 32px; display: flex; justify-content: center; align-items: center;" class="shareBtn" onclick="playvideo();"> </a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<script>
|
||||||
|
var jumbotron_video = document.getElementById('jumbotron_video');
|
||||||
|
var play_button_container = document.getElementById('play_button_container');
|
||||||
|
window.onload = function() {
|
||||||
|
setTimeout(function() {
|
||||||
|
if (jumbotron_video.paused) {
|
||||||
|
play_button_container.style.display = 'block';
|
||||||
|
}
|
||||||
|
}, 1000);
|
||||||
|
};
|
||||||
|
function playvideo() {
|
||||||
|
jumbotron_video.play();
|
||||||
|
play_button_container.style.display = 'none';
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
{{ end }}
|
||||||
{{ if .Site.Data.jumbotron.links }}
|
{{ if .Site.Data.jumbotron.links }}
|
||||||
<ul>
|
<ul>
|
||||||
{{ range .Site.Data.jumbotron.links }}
|
{{ range .Site.Data.jumbotron.links }}
|
||||||
|
|
Loading…
Reference in New Issue