comparison bns_website/templates/videos/index.html @ 98:4de34a1446a0

Fix video page. Was only displaying 2 videos in playlist. YouTube must have changed something? In any event, it is easier to use now. Can just use an <iframe> and give it a list of videos now.
author Brian Neal <bgneal@gmail.com>
date Fri, 13 Jul 2012 21:36:53 -0500
parents 1d2473f4bcaa
children ee491a3f486d
comparison
equal deleted inserted replaced
97:c3b5b4639a15 98:4de34a1446a0
6 <h1>Watch</h1> 6 <h1>Watch</h1>
7 7
8 {% if videos %} 8 {% if videos %}
9 <p> 9 <p>
10 Please enjoy this {{ videos|length }} video playlist of the bands that performed on the 10 Please enjoy this {{ videos|length }} video playlist of the bands that performed on the
11 <em>Brave New Surf</em> compilation. You can use the button that looks like a widescreen TV 11 <em>Brave New Surf</em> compilation. Once you press play, you can use the playlist button
12 at the bottom of the player to scroll through all the videos. 12 at the bottom of the player to scroll through all the videos.
13 </p> 13 </p>
14 <div id="player"></div>
15 14
16 <script> 15 <iframe id="ytplayer" type="text/html" width="853" height="480"
17 var tag = document.createElement('script'); 16 src="http://www.youtube.com/embed/{{ videos|first }}?version=3&playlist={{ videos|slice:"1:"|join:"," }}"
18 tag.src = "http://www.youtube.com/player_api"; 17 frameborder="0"/>
19 var firstScriptTag = document.getElementsByTagName('script')[0];
20 firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
21
22 var player;
23 function onYouTubePlayerAPIReady() {
24 player = new YT.Player('player', {
25 videoId: '{{ videos|first }}',
26 {% if videos|length > 1 %}
27 playerVars: { playlist: [
28 {% for video in videos|slice:"1:" %}
29 {% if not forloop.first %},{% endif %}'{{ video }}'
30 {% endfor %} ]},
31 {% endif %}
32 width: '853',
33 height: '480'
34 });
35 }
36 </script>
37 18
38 {% else %} 19 {% else %}
39 <p>Videos of the bands are coming soon. Please check back later.</p> 20 <p>Videos of the bands are coming soon. Please check back later.</p>
40 {% endif %} 21 {% endif %}
41 {% endblock %} 22 {% endblock %}