{% extends "global/Page.html" %}


{% block title %}Detailed information about the charities for round 5, 6,7, and 8.{% endblock %}
{% block content %}
    <p>
        This is a video about the 4 most effective charities today in the world according to GiveWell.org.
        This video is about 5 minutes. After watching the video, you can get more information about these four charities.
        Please turn up your volume and click the play button to watch the video.
        You can not continue until you have finished watching the video.
        When the video is finished, click the "next" button below to continue.
    </p>

    <br>
    <br>
    <br>

    <div id="video_player"></div>
    <br>
    <button type="button" class="btn btn-success" id="btn_instructions">Show instructions</button>
    <div id = "instructions" style="display:none">
        <p>You can not continue until you have finished watching the video.</p>
    </div>
    <script>
        $('#btn_instructions').click(function() {
            $('#instructions').toggle();
            $(this).html( $(this).html() == 'Show instructions' ? 'Hide instructions' : 'Show instructions' );
        });
    </script>







    <br>
    <br>
    <button id="continue" class="otree-btn-next btn btn-primary" disabled>Finished with video</button>



{% endblock %}

{% block script %}
    <script src="http://www.youtube.com/player_api"></script>

    <script>

        // create youtube player
        //let video_player;
        function onYouTubePlayerAPIReady() {
            player = new YT.Player('video_player', {
              width: '800',
              height: '600',
              videoId: 'xHegpKx61eE',
              events: {
                onReady: onPlayerReady,
                onStateChange: onPlayerStateChange
              }
            });
        }

        // autoplay video
        function onPlayerReady(event) {
            event.target.playVideo();
        }

        // when video ends
        function onPlayerStateChange(event) {
            if(event.data === 0) {
                $('#continue').prop('disabled', false);
            }
        }

    </script>

{% endblock %}