Jeżeli kod javascript znajduje się (w trakcie ładowania strony) przed elementem html (w tym przypadku <video>) to document.getElementById("myVideo") wykona się "wcześniej" i dlatego "nie widzi" tego znacznika.
Pierwsze rozwiązanie: jeżeli javascript znajduje się przed tagiem <video> używamy np.: onload
. . .
<button id="video_play" type="button">Play Video</button>
<button id="video_pause" type="button">Pause Video</button><br>
<script>
window.onload = () => {
const video_tag = document.getElementById("myVideo");
const button_video_play = document.getElementById("video_play");
const button_video_pause = document.getElementById("video_pause");
button_video_play.addEventListener('click', () => {
video_tag.play();
})
button_video_pause.addEventListener('click', () => {
video_tag.pause();
})
}
</script>
<header>
<div class="overlay"></div>
<video id="myVideo" playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop">
<source src="https://storage.googleapis.com/coverr-main/mp4/Mt_Baker.mp4" type="video/mp4">
</video>
. . .
Twój kod działa, ale musisz przenieś tag <script> za tag <video>
. . .
<button onclick="playVid()" type="button">Play Video</button>
<button onclick="pauseVid()" type="button">Pause Video</button><br>
<header>
<div class="overlay"></div>
<video id="myVideo" playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop">
<source src="https://storage.googleapis.com/coverr-main/mp4/Mt_Baker.mp4" type="video/mp4">
</video>
<script>
var vid = document.getElementById("myVideo");
function playVid() {
vid.play();
}
function pauseVid() {
vid.pause();
}
</script>
. . .
[ window.onload ] [ Window: DOMContentLoaded event ]