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

<script src="/assets/videojs/video.js"></script>
<script src="/assets/videojs/videojs-contrib-hls.js"></script>

<div id="post">
  

    <div id="page-header">
        <h2>EPISODE {{post.title}}</h2>
    </div>

<link rel="stylesheet" href="/assets/videojs/video-js.css">


   
   
   {% if post.episode-prereqs %}
   <h4>Prereqs</h4>
     <ul>
     {% for ep-url in post.episode-prereqs %}
       <li><a href="{{ep-url}}">{{ep-url}}</a></li>
     {% endfor %}
     </ul>
   {% endif %}
   
{% if post.video-url %}
<video id=example-video width=640 height=360 class="video-js vjs-default-skin" data-setup='{"controls": "true", "loop": "false", "autoplay": "false", "preload": "false"}'>
  <source
     src="{{post.video-url}}"
     type="application/x-mpegURL">


</video>

<script>
var player = videojs('example-video');
player.play();
</script>

{% else %}
  {% if post.episode-yt-video-id %}
    
    
     <div>
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/{{post.episode-yt-video-id}}?rel=0&amp;showinfo=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>     
     

     </div>
    
  {% endif %}
{% endif %}




    
   {% include "/html/post-content.html" %}

   {% if post.episode-next-steps %}

    <div id="prev-next">
   <h4>Next steps</h4>
     <ul>
     {% for ep-url in post.episode-next-steps %}
       <li><a href="{{ep-url}}">{{ep-url}}</a></li>
     {% endfor %}
     </ul>
   {% endif %}

   

    </div>

</div>
{% endblock %}
