{% extends "/html/base.html" %}
{%block subtitle %}: {{page.title}}{% endblock %}

{% block head %}


{% include "/html/partials/video-head-videojs.html" %}

{% endblock %}

{% block content %}
<div id="custom-page">
    <div id="page-header">
        <h2>{{page.title}}</h2>
    </div>


    {% if page.toc %}{{page.toc|safe}}{% endif %}
    {{page.content|safe}}


    {% if page.video-yt-id %}
      <div id="whats-ispooge-live-video-yt" style="">
        
        
<video id="video-player" width="640" height="360" class="video-js vjs-default-skin" 
  controls poster="{{page.video-thumbnail-url}}" data-setyp='{"controls": "true", "loop": "false", "autoplay": "false", "preload": "false"}'>
    <source src="{{page.video-url}}" type="application/x-mpegURL">
    </source>
    <p class="vjs-no-js">The browser doesn't seem to support our video player... new browsers should.</p>
  </video>
  
  <script>
  var player = videojs('video-player');
  
  							player.ready(function() {
  							
  							   player.mediaSession();
  });
  //player.play();
  </script>
  
          
        
      </div>
    {% endif %}


<script>
  var el = document.getElementById('whats_ispooge_live_video');
  var newEl = document.getElementById('whats-ispooge-live-video-yt');
  
  newEl.parentElement.replaceChild(newEl, el);
</script>

</div>
{% endblock %}