DEV Community: Ben Patterson

Fixing A Broken Deployment to Google App Engine

Ben Patterson — Thu, 04 Jul 2024 13:13:42 +0000

It's been ten years since I created the first version of benpatterson.io.

In 2014, I took a web development on Udacity that was taught by Steve Huffman of Reddit fame. He taught authentication, salting passwords, the difference between GET and POST requests, basic html and css, caching techniques. It was a fantastic introduction to web dev. To pass the course, students deployed simple python servers to Google App Engine. When I started to look for work, I opted to use code from that class to deploy a personal site to google app engine.

Years later, benpatterson.io is no longer written in python but it still lives on Google App Engine. I ran into a bit of trouble posting my last technical entry.

First, jekyll wouldn't run on my new Mac.

I ran bundle install but it threw errors. I deleted the Gemfile.lock file, ranbundle install again and it finished without errors. However, bundle exec jekyll serve would not run the site! Jekyll-admin was throwing Error: uninitialized constant Rack::Handler.

Frustrated, I removed jekyll-admin from the Gemfile, ran bundle install and then bundle exec jekyll serve. That got rid of one error but exposed a new one.

 Conversion error: Jekyll::Converters::Scss encountered an error while converting 'assets/css/noscript.scss':
                    expected "{".
                    ------------------------------------------------
      Jekyll 4.3.3   Please append `--trace` to the `serve` command 
                     for any additional information or backtrace.

After some googling and reading this post, I determined that having a file named noscript.css in the assets directory and a file named the same in the _sass directory was causing the issue. The fix was to rename noscript.css to no-script.css.

Now the site was running locally! Ecstatic, I made a tiny change and pushed it up to github to make sure the CI/CD pipeline was still working.

It was not.

I checked build logs and found that bundle install was not working the same as it did on my machine. I installed rvm, tried multiple versions of ruby, attempted to upgrade various gems. Nothing worked.

I suspected the that it must be due to differences between running on a mac and in linux. This suspicion was easy enough to verify with docker and VS Code.

VS Code does a great job running a folder inside a docker containers. I started up docker, clicked the two blue arrows on the left bottom corner of VS Code and chose.

Reopen in container

I also, chose an ubuntu base with ruby as an addon.

VS Code creates .devcontainer/devcontainer.json file when code is running in a new container. Here's mine.

{
    "name": "Ubuntu",
    "image": "mcr.microsoft.com/devcontainers/base:jammy",
    "features": {
        "ghcr.io/devcontainers/features/ruby:1": {}
    }

}

With the code running in Ubuntu/docker, I attempted to duplicate the build issue in the pipeline by running bundle install from the terminal inside VS Code.

The exact same error occurred. My suspicions were confirmed.

I deleted the Gemfile.lock and ran bundle install.
The install worked!

I ran bundle exec serve. That worked too!

Eager to see the build work in the CI/CD pipeline, I pushed up my changes. The build completed and it attempted to push the built site to app engine.

It failed.

The format of my app.yaml file was at least ten years old and had been completely deprecated since the last time I deployed.

This is what the old file looked like.

runtime: python27
api_version: 1
threadsafe: true

handlers:
  - url: /
    static_files: jekyll-app/_site/index.html
    upload: jekyll-app/_site/index.html
    secure: always

  - url: /(.*)
    static_files: jekyll-app/_site/\1
    upload: jekyll-app/_site/(.*)
    secure: always

skip_files:
- ^(node_modules/.*)
- ^(node_modules/.*)
- ^(jekyll-app/.jekyll-cache/.*)
- ^(jekyll-app/.sass-cache/.*)
- ^(jekyll-app/.jekyll-cache/.*)
- ^(jekyll-app/.jekyll-metadata/.*)
- ^(jekyll-app/vendor/.*)

Here is the new file.

runtime: python312
handlers:
  - url: /
    static_files: jekyll-app/_site/index.html
    upload: jekyll-app/_site/index.html
    secure: always

  - url: /(.*)
    static_files: jekyll-app/_site/\1
    upload: jekyll-app/_site/(.*)
    secure: always

In the new file, the runtime changed to python312, the api_version, threadsafe and skip_files options are removed. The skip files are now noted in .gcloudignore file and matches the format of a .gitignore file.

Success! The site built and deployed in cloud build again!
Take a look at my previous post if you're curious to see how I set that up in the first place.

I eventually got jekyll-admin working locally again by adding the following to my Gemfile

gem "sinatra", ">= 3", "< 4"

It's hard to believe that benpatterson.io has been up for ten years. It's still fun to tinker with and posting again makes me happy.

App Engine is overkill for a static site. Setting up a CDN and uploading directly to a bucket would be simpler but there's been no immediate need to change how benpatterson.io's hosted. See https://cloud.google.com/storage/docs/hosting-static-website if you're building a static site on google from scratch.

Add album art to music files via the command line

Ben Patterson — Fri, 21 Jun 2024 18:09:02 +0000

My digital music collection goes all the way back to 2002 when I bought my first laptop. Over the years, I downloaded various tracks, ripped copies of my cds using windows media player, copied family members cds to my computer. I bought music in a variety of sources, encoded new cds in multiple formats, transferred the collection from one operation system to another and from iPhone to Android and back again.

My collection isn't huge but it's mine. It had taken years to collect and almost every file had some sort of sentimental value. There was always a time or place that I had bought the album or a song that had a certain resonance to it. As I spend more time purchasing new music instead of just streaming it, I feel a greater affinity to the music I do have. I want to invest more time listening to an album in it's entirety. It makes me appreciate the effort put into the album and it makes me want to talk about it with others more.

It is a mess though. I have been cleaning things up. There is something about having accurate track data and album art that enhances the listening experience. I wanted better quality files. My hearing isn't great but I've been trying to opt for better quality files even if I personally can't tell the difference. Apologies to audiophiles.

Implementation

I opted to use the command line tool abcde to do this re-copy the cds. It allowed my to set a higher bitrate and took care of things like embedding album art.

What was left was a collection in mp3, m4a and ogg formats. Some had album art, some didn't. Some albums had been split into different folders due to issues with iTunes or other software that I had used over the years. Some albums lacked any track data at all!!

I also opted to use the command line to embed album art. Googling didn't return any ui options and I wasn't about to pay for a program without being sure it would solve my problem. I added track data manually with VLC. Luckily there where only a couple of albums where I had to do that.

The below was all run on a mac. Command line tools where installed using brew . I suggest making a backup of your files before running any scripts against them

MP3

For MP3s I used ffmpeg and followed the following steps

Find the album art online
Download it into the folder where the album is stored. I've named it cover.jpg, png files will work too
Run the below script inside the folder
Delete the original folder and rename the copy that is created

thisdir=$(pwd)
dircp="${thisdir}-copy"
mkdir -p "$dircp"

for filename in ./*.mp3; do
    basefile=$(basename "$filename" ".mp3")
    ffmpeg -i "${basefile}.mp3" -i cover.jpg -map_metadata 0 -map 0 -map 1 -acodec copy "${dircp}/${basefile}.mp3"

done

M4A

For the m4a files, I used AtomicParsley. I was pretty happy to be able to copy in place for this option

Find the album art online
Download it into the folder where the album is stored. I've named it cover.jpg, png files will work too
Run the below script inside the folder

for filename in ./*.m4a; do
    basefile=$(basename "$filename")
    AtomicParsley "$basefile" --artwork "cover.jpg" --overWrite
done

for filename in ./cover-resized*; do
    rm $filename
done

OGG

The ogg files where a bit tougher. I had to dive into abcde's source code. to see how they did it. The below is slightly altered to work on my mac. It uses vorbiscomment to add meta data. All thanks to abcde for the below. You should definitely make a copy of your files before running this. It's easy to mess up the metadata and tricky to get it back

Find the album art online
Download it into the folder where the album is stored. I've named it cover.jpg, png files will work too
Run the below script inside the folder

#!/bin/bash

thisdir=$(pwd)
ABCDETEMPDIR="${thisdir}-tmp"
mkdir -p "$ABCDETEMPDIR"


VORBISCOMMENT=vorbiscomment

ALBUMARTFILE=cover.jpg
MIMETYPECOVER=$(file -b --mime-type "$ALBUMARTFILE")
EXPORTTAGS="${ABCDETEMPDIR}/export_ogg_tags"
BUILDHEADER="${ABCDETEMPDIR}/build_header"

# Now build the header, gory details are here:
# https://xiph.org/flac/format.html#metadata_block_picture
# Picture Type:

printf "0: %.8x" 3 | xxd -r -g0 > "$BUILDHEADER"

# Mime type length

printf "0: %.8x" $(echo -n "$MIMETYPECOVER" | wc -c) | xxd -r -g0 >> "$BUILDHEADER"
# Mime type:

echo -n "$MIMETYPECOVER" >> "$BUILDHEADER"
printf "0: %.8x" $(echo -n "Cover Image" | wc -c) | xxd -r -g0 >> "$BUILDHEADER"

# Description:

echo -n "Cover Image" >> "$BUILDHEADER"

# Picture width:
printf "0: %.8x" 0 | xxd -r -g0 >> "$BUILDHEADER"

# Picture height:
printf "0: %.8x" 0 | xxd -r -g0 >> "$BUILDHEADER"

# Picture color depth:
printf "0: %.8x" 0 | xxd -r -g0 >> "$BUILDHEADER"

# Picture color count:
printf "0: %.8x" 0 | xxd -r -g0 >> "$BUILDHEADER"

# Image file size:
printf "0: %.8x" $(wc -c "$ALBUMARTFILE" | awk '{print $1}') | xxd -r -g0 >> "$BUILDHEADER"

# cat the image file:
cat "$ALBUMARTFILE" >> "$BUILDHEADER"

# Now process each ogg file by first exporting the original tags then
# appending the cover image and finally copying the whole thing back
# to the original image:

for i in *.ogg

do

# Make a backup of the existing tags:

    "$VORBISCOMMENT" -d metadata_block_picture $i

    "$VORBISCOMMENT" --list --raw "$i" > "$EXPORTTAGS-$i.txt"

    cat "$EXPORTTAGS-$i.txt"

    # base64 the file and then mix it all together with the exported tags:

    echo "metadata_block_picture=$(base64 < "$BUILDHEADER")" >> "$EXPORTTAGS-$i.txt"

    # # Update the original ogg file with exported tags and the appended base64'd image:

    "$VORBISCOMMENT" --write --raw --commentfile "$EXPORTTAGS-$i.txt" "$i"

    # Delete the EXPORTTAGS file ready to be recreated for the next file in the loop,

    # note that the header file BUILDHEADER will be reused for each file in the loop:

done

rm -rf "$ABCDETEMPDIR"

And that's it! Let me know if this helps you out or if you run into bugs!

This was a fun diversion for me. It reminded me about all the things I love about programming, like diving into source code, learning about new tools, implementing simple solutions. I didn't have to write any complex code to solve my problem or re-invent the wheel. Research and patience went so much further than trying to write a script that would fix everything at once. Maybe if there is market for aging millennials and gen-xers desperately hanging on to decades old digital media, I can revisit this.

Adding a cookie disclaimer to my static Jekyll site

Ben Patterson — Sat, 18 Sep 2021 23:49:20 +0000

My personal site is generated with jekyll and is a few static pages. However, I use google analytics and I also use disqus as an option to comment. I'd also consider putting ads on the site if traffic every increased. All these things use cookies to some degree. Even though my site is small and static, not giving users an option to opt out of cookies could put me in trouble with European law. This is very unlikely but I like doing things the right way I thought it might be a good idea to fix that issue with my site just in case I suddenly get a European audience.

As a disclaimer, I'm not a lawyer and am not providing legal advice. I suggest doing your own research on what you or your company needs before implementing anything.

I mostly followed the instructions at jekyllcodex.org to add the banner. Luckily, I didn't have to re-invent the wheel. The nice thing about keeping things simple in the framework is that adopting code and plugins usually just works. After a short google search for jekyll cookie policy, I was in business.

I added the below code to my default layout so the banner would show up on every page unless cookies were accepted. Essentially, if you say cookies are OK with you, it sets a cookie and reloads the page. Any features that require cookies are only enabled if that cookie is set. Because my site is static, this was fairly simple.

<style>
    #cookie-notice { font-weight: 900; font-size: 1rem; padding: 0.5rem 1rem; display: none; text-align: center; position: fixed; bottom: 0; width: calc(100% - 2rem); background: #222; color: rgba(255,255,255,0.8); z-index: 9000;}
    #cookie-notice a {display: inline-block; cursor: pointer; margin-left: 0.5rem;}
    @media (max-width: 767px) {
        #cookie-notice span {display: block; padding-top: 3px; margin-bottom: 1rem;}
        #cookie-notice .btn a {position: relative; bottom: 4px;}
    }
</style>
<div id="cookie-notice">

    <span>We would like to use third party cookies and scripts to improve the functionality of this website.
        <a href="/privacy-policy.html" >privacy policy</a>
        <a href="/cookie-policy.html" >cookie policy</a>
    </span>
    <a id="cookie-notice-accept" class="btn btn-primary btn-sm .button">Approve</a>
    <a id="cookie-notice-dismiss" class="btn btn-primary btn-sm .button">Dismiss</a>
</div>
<script>
    function createCookie(name,value,days) {
        var expires = "";
        if (days) {
            var date = new Date();
            date.setTime(date.getTime() + (days*24*60*60*1000));
            expires = "; expires=" + date.toUTCString();
        }
        document.cookie = name + "=" + value + expires + "; path=/";
    }

    if(readCookie('cookie-notice-dismissed') !=='true') {
        document.getElementById('cookie-notice').style.display = 'block';
    }

    document.getElementById('cookie-notice-accept').addEventListener("click",function() {
        createCookie('cookie-notice-dismissed','true',31);
        document.getElementById('cookie-notice').style.display = 'none';
        location.reload();
    });

    document.getElementById('cookie-notice-dismiss').addEventListener("click",function() {
        document.getElementById('cookie-notice').style.display = 'none';
    });


</script>

I then added the below for my disqus comments.

  <div id="disqus_thread"></div>
  <script>
      if(readCookie('cookie-notice-dismissed')=='true'){
        var disqus_config = function () {
        this.page.url = '{{ page.url | absolute_url }}';
        this.page.identifier = '{{ page.url | absolute_url }}';
      };

      (function() {
        var d = document, s = d.createElement('script');

        s.src = 'https://{{ site.disqus.shortname }}.disqus.com/embed.js';

        s.setAttribute('data-timestamp', +new Date());
        (d.head || d.body).appendChild(s);
      })();
    }
  </script>

And finally for my google analytics script.

if((readCookie('cookie-notice-dismissed')=='true') && !(window.doNotTrack === "1" || navigator.doNotTrack === "1" || navigator.doNotTrack === "yes" || navigator.msDoNotTrack === "1")) {
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

  ga('create', '{{ site.google_analytics }}', 'auto');
  ga('send', 'pageview');
}

For the privacy policy and cookie policy, I generated them over at termly.
I'm pretty happy with how it turned out overall. I was able to get my website into a state that respected privacy and EU regulations while my kid was taking a nap.

Keep It Simple

Ben Patterson — Sat, 27 Feb 2021 17:27:38 +0000

First let's and acknowledge that syntax and the language is the easy part of coding. Everything else is the hard part. Creating code that is simple, readable, resilient, easy to debug and maintainable is hard. Creating code that is easy to maintain by yourself and others is hard. Designing something that works inside the context of a legacy system and can be easily understood by coworkers is hard. It gets easier with time. To get to a point where things are easy and stays easy and is easy for others, you'll want to invest in the discipline of keeping things simple.

Overthinking, over engineering, over complicating a problem are enemies of productivity and maintainability, and avoiding burnout. You want to write as little as possible, you want the code to do as little as possible to avoid bugs and side effects and you want to read as little as possible when you or someone else needs to add to it. In this first post, I'll focus on KIS or Keep it Simple

KIS - Keep It Simple

I'll acknowledge that the whole term is KISS: Keep it Simple Stupid but maybe we don't need to insult ourselves as part of a mantra. Also, it's probably not a good idea to call people you work with or others stupid.

The definition of simple is subjective to project, language and team. Keeping it simple means that you write less code, maintain less code, introduce less opportunity for bugs and make it easier for the next developer to understand your work. Keeping it simple means knowing the problem you are trying to solve and avoiding unneeded complexity when solving that. I'll try to provide some tips on how to get there.

Take the time to answer the below questions

What exactly does this need to do?
What is the bare minimum to make that happen.
Can I objectively say that the problems I am adding code to solve are relevant?
What tools are my coworkers using and am I introducing a tool with a steep learning curve?
Are the changes I am introducing absolutely needed. Am I refactoring for refactoring sake?

Ask questions, invest time in reading the code or studying infrastructure. If it's a personal project, know your goals and pay attention when new technologies and complexity are a distraction. I suggest writing out the problem your solving or goals for the change for in plain language. When adding complexity or changes, you can ask yourself if that action solves the problem you are currently solving.

Don't be afraid to take notes while reading through code to understand the problem. I feel it's common to see developers taking notes when gathering business requirements, but when they need to read through complex code, they just try to absorb it all. We all have limits. There is no rule that you need to keep all the understanding of code/infrastructure in your head!

Sometimes you find out the solution that you need is very simple after a large investment of time and writing code. It might be a single if statement or a tiny config change. For many, it isn't satisfying to solve a problem without a larger contribution. A simple solution might unjustly get labeled a band-aid or a hack. I think band-aids are wonderful inventions that don't get enough credit for most minor injuries, they are the exact thing you need. Knowing the problem in depth means you understand the root cause and if it needs to be solved or not. You'll know if a band-aid is appropriate if you've invested time in understanding the issue. Have confidence in the solution. If you know the problem, you'll know if your solution is a hack or not. Ignore comments or the feeling that something is a hack if the word "hack" is code for "too simple" or "boring". Have confidence in the solution.

It's tempting to keep a more complex solution to feel that satisfaction of contribution. For that, I'll say there is always more code to write. Defining maintenance as a problem means that refactoring or large changes can be done it's own scope. Don't attach yourself to lines of code. Celebrate simple solutions, celebrate boring code, celebrate removal of complexity. Spread this feeling to your team. A few nice words on a pull request or celebrating someone in a slack message will go a long way.

Hopefully this helps you. Keeping it simple is a discipline and it gets easier with experience. My experience is that developers can have a hard time getting over the desire to add complexity. Keep working on it. It's worth it, I promise. It might even help outside of programming.

An Exercise in Granting Access to Content By Watching a YouTube Video

Ben Patterson — Wed, 09 Dec 2020 04:34:08 +0000

A few evenings ago, I saw someone post a request for technical help on twitter. I responded that I thought I could hack something together. Nothing came of that but I couldn't get the the thought out of my head once it was there. To clear my head, I'll build a proof of concept in this post as a writing/coding exercise. I'll go through my steps of researching the feature and building out a working example. The question was.

Is there a way that I can create a way for people to have to watch a short video before they can access a resource?
How can I do this with very little effort?

Assuming it's public website, the answer is a little bit of JavaScript and html. It'll have to be adapted to whatever framework the site is using but, for the purposes of simplicity, I'm going to stick to vanilla JavaScript.

Let's say you have a web page that you want people to watch a video before watching

<html>
  <body>
    This is my website that requires you to watch through a video before accessing
  </body>
</html>

First, lets arrange the html and css so that the content isn't visible on page load. I'm putting the css in a <style> block to keep the page concise but you can put in in a separate css file. The below will result in a completely blank page.

<html>
    <style>
      .content {display:none;}
    </style>
  <body>
    <div class="content">
      This is my website that requires you to watch through a video before accessing
    </div>
  </body>
</html>

I like to figure out what is going to be the last state as soon as possible. Too often, you'll write a program and wait to long to confirm your plan is going to work. You'll end up doing a lot of work on the logic whether to do a thing or not but you haven't established that you CAN do that thing. Trying to think through in a linear fashion without figuring out the destination will get you lost quick.

I've thought through the logic that I want to apply here. Sometimes a flow chart is helpful to plan this out. I'm going to advise against using pseudo code too early to avoid creating a solution before understanding the problem.

Page content is not available
Program checks a condition to see if the user has watched video
If the user has seen the video, move to step 5
Video appears and user is prompted to watch it
When the video is finished, the program records a condition so that the next time the user visits, the don't have to.
Content is made visible

The logic all seems to be all in steps two through five. I'm going to make sure that the non logic steps one and six are working before tackling the logic. This isn't a terribly complicated issue, but it's a good idea to isolate the most complicated parts of a program so that you can focus on it when working on it.

Let's get step six taken care of and add some javascript that will take the initial state of not being visible and change that to being visible after the page loads.

<html>
    <style>
      .content { display:none; }
    </style>
  <body>
    <div class="content">
      This is my website that requires you to watch through a video before accessing
    </div>
  </body>
  <script>
    window.onload = (event) => {
      const content = document.querySelector('.content');
      content.style.display = "inline"
    };
  </script>
</html>

Now, I'll start adding logic. I'm confident that I can use localStorage to persist something that will track if a user has watched the video so I'll work on that last. I'm also going to make an assumption that the questioner is not going to host their own video and will use youtube. Some googling has lead me to this stackoverflow article as a potential solution. I'll do a little more reading and attempt to use it as a reference to embedded a youtube video.

Stack overflow is one of the few places on the internet where reading the comments is useful. In the linked article, there are notes on api changes to be aware of. The answer also links to the docs directly. Spending an extra minute on reading through the links has saved me some time. My assumption was that all I needed to do was copy the standard embedded url for a youtube video and then listen for an event.

The example from google shows that I need to use the youtube iframe api and create a YT.Player object to interact with the video. The same site give me a set of docs that I'm sure I'll have to refer to for enhancements or debugging. Stack overflow answers with links to docs are so much more helpful that ones without. Here's the example code that would instantiate a video.

  function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
      height: '390',
      width: '640',
      videoId: 'M7lc1UVf-VE',
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
      }
    });
  }

I've read through the example and it's doing a bit more than I need. It looks to be auto starting the the video and stopping it six seconds after it starts. I think my next incremental step is to nothing but to get the youtube video on the page using the api instead of the embedded html. So I'll trim the example code, add it to my page and make sure I can get a video loaded. Here's the code to get a video to display using the api.

<html>
    <style>
      .content {display:none;}
    </style>
  <body>
    <div class="content">
      This is my website that requires you to watch through a video before accessing
    </div>
    <div id="info-video"></div>
  </body>
  <script>
     // This loads the youtube iframe api
    const tag = document.createElement('script');
    tag.src = "https://www.youtube.com/iframe_api";
    const firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
    // This function needs to be global
    function onYouTubeIframeAPIReady() {
      player = new YT.Player('info-video', {
        height: '390',
        width: '640',
        videoId: <Your video id>,
        events: {
        }
      });
    }
    window.onload = (event) => {
      const content = document.querySelector('.content');
      content.style.display = "inline"
    };
  </script>
</html>

Now I can focus on the logic parts of the code now that I know the basics work.

After some debugging and refactoring, this is what I have. I've added an onStateChange function to the YouTube player that will make the site visible after the video has ended. debugging was easier at this point because I knew the code to load the player was working and could focus on the new parts.

<html>
    <style>
      .content {display:none;}
    </style>
  <body>
    <div class="content">
      This is my website that requires you to watch through a video before accessing
    </div>
    <div id="no-access-view">
      <h4>Please watch this video before entering this site</h4>
      <div id="info-video"></div>
    </div>
  </body>
  <script>
     // This loads the YouTube iframe api
    const tag = document.createElement('script');
    tag.src = "https://www.youtube.com/iframe_api";
    const firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
    // This function needs to be global to be consumed by the iframe_api
    function onYouTubeIframeAPIReady() {
      let player;
      function onStateChange(event){
        if(event.data == YT.PlayerState.ENDED){
          const noAccessMessage =  document.querySelector('#no-access-view');
          noAccessMessage.style.display = "none";
          const content = document.querySelector('.content');
          content.style.display = "inline";
          if (player) player.destroy()
        }
      }
      player = new YT.Player('info-video', {
        height: '390',
        width: '640',
        videoId: '<your video id>',
        events: {
          onStateChange
        }
      });
    }
  </script>
</html>

My last step is to add the logic around noting that the video has been played in a previous session to skip showing it on reload. Think I'll use localStorage for that and put the code for displaying the site in a function to DRY things out.

<html>
<style>
  .content {
    display: none;
  }
</style>

<body>
  <div class="content">
    This is my website that requires you to watch through a video before accessing
  </div>
  <div id="no-access-view">
    <h4>Please watch this video before entering this site</h4>
    <div id="info-video"></div>
  </div>
</body>
<script>
  function openUpSite() {
    const noAccessMessage = document.querySelector('#no-access-view');
    noAccessMessage.style.display = "none";
    const content = document.querySelector('.content');
    content.style.display = "inline";
  }
  if (localStorage.getItem('accessVideoPlayed')) {
    openUpSite();
  } else {
    // This loads the youtube iframe api
    const tag = document.createElement('script');
    tag.src = "https://www.youtube.com/iframe_api";
    const firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  }
  // This function needs to be global to be consumed by the iframe_api
  function onYouTubeIframeAPIReady() {
    let player;
    function onStateChange(event) {
      if (event.data == YT.PlayerState.ENDED) {
        localStorage.setItem('accessVideoPlayed', 'true');
        openUpSite();
        if (player) player.destroy()
      }
    }
    player = new YT.Player('info-video', {
      height: '390',
      width: '640',
      videoId: '<your video id>',
      events: {
        onStateChange
      }
    });
  }
</script>

</html>

And there you have it. The user has to watch the video and the next time they visit the site, they don't have to watch it. I worked through my example as I wrote this. You can see the code working at https://benpatterson.io/force-a-video.

This is not meant to be an implementation of anything secure. It's more or less a velvet rope for honest people/average user.