Disable full screen on double click - Video.js

I am using Video.js to play a video on my site and would like to disable the default double click to full screen behaviour.

I found this in the docs but not sure how to implement it. I have tried placing the suggested code in my main.js file but I guess I need to do something else as that doesn't work?

This is the simplified video.js code I'm using:

<!DOCTYPE html>
<html>
<head>
  <link href="https://vjs.zencdn.net/7.8.2/video-js.css" rel="stylesheet" />

  <!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
  <script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>
</head>

<body>
  <video
    id="my-video"
    class="video-js"
    controls
    preload="auto"
    width="640"
    height="264"
    poster="MY_VIDEO_POSTER.jpg"
    data-setup="{}"
  >
    <source src="MY_VIDEO.mp4" type="video/mp4" />
    <source src="MY_VIDEO.webm" type="video/webm" />
    <p class="vjs-no-js">
      To view this video please enable JavaScript, and consider upgrading to a
      web browser that
      <a href="https://videojs.com/html5-video-support/" target="_blank"
        >supports HTML5 video</a
      >
    </p>
  </video>

  <script src="https://vjs.zencdn.net/7.8.2/video.js"></script>
</body>
</html>

Solution

As you're using data-setup to init the player, then add it to the JSON string:

data-setup='{"userActions": {"doubleClick": false }}'