Sample Code for 360 Demo does not work as expected

I am trying to get a 360 demo running but it seems like I'm missing some configuration options. Please let me know what I should be changing.

Note: even the ui parameters don't seem to register when I open the file so it's possible that the script is running too early or too late?

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>THEOplayer 2.X: Getting Started</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- Chromecast SDK -->
    <script type="text/javascript" src="http://gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1"></script>

    <!-- THEOplayer library and css -->
    <link rel="stylesheet" type="text/css" href="https://cdn.myth.theoplayer.com/aa9f2fae-a943-420c-bd08-273678f4c036/ui.css" />

</head>

<body>

    <div class="theoplayer-container video-js theoplayer-skin vjs-16-9"></div>
    <script type="text/javascript" src="https://cdn.myth.theoplayer.com/aa9f2fae-a943-420c-bd08-273678f4c036/THEOplayer.js"></script>

    <script>
        var element = document.querySelector(".theoplayer-container");
        var player = new THEOplayer.Player(element, {
            libraryLocation: "https://cdn.myth.theoplayer.com/aa9f2fae-a943-420c-bd08-273678f4c036",
            fluid: true,
            ui : {
                width: '800px',
                height: '500px'
            }     
        });

        // OPTIONAL CONFIGURATION
        // Customized video player parameters
        player.source = {
            sources: {
                "src": "https://demo.theoplayer.com/hubfs/videos/natgeo/playlist.m3u8",
                "type": "application/x-mpegurl"
            },
            // VR configuration
            vr: {
                "360": true
            }
        };

        player.preload = 'auto';
    </script>
</body>

</html>

THEOplayer / samples-html5-sdk

Sample Code for 360 Demo does not work as expected #37