KendraTang/can.html

## can.html
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.0/lodash.js"></script>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="./a.css">
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
    <div class='container'>
        <button class='btn btn-default'>Go!</button>
    </div>
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div id="player"></div>
                <!-- <iframe src="https://www.youtube.com/embed/Ae6gQmhaMn4" frameborder="0" allowfullscreen></iframe> -->
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
    <script>
        $('button').on("click", function() {
          $('#myModal').modal();
        });
        // 2. This code loads the IFrame Player API code asynchronously.
        var tag = document.createElement('script');

        tag.src = "https://www.youtube.com/iframe_api";
        var firstScriptTag = document.getElementsByTagName('script')[0];
        firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

        // 3. This function creates an <iframe> (and YouTube player)
        //    after the API code downloads.
        var player;
        function onYouTubeIframeAPIReady() {
            player = new YT.Player('player', {
                videoId: 'M7lc1UVf-VE',
            });
        }

        $('#myModal').on('hide.bs.modal', function (e) {
            player.stopVideo();
        });
        $('#myModal').on('shown.bs.modal', function (e) {
            player.playVideo();
        });

    </script>
</body>
</html>

## cannot.slim
- provide :title, "影音資料庫"
- provide :subtitle, "#{ @chapter.chapters_title } |"
- provide :cover, image_path('cover.jpg')

#library data-current-chapter=@chapter.id
  .horizontal.wrap
    #units
      .desktop.laptop.tablet
        nav.ui.four.item.fluid.no.radius.margin.menu.inverted.blue
          == render 'chapter_nav'
      .phone
        nav.ui.one.item.fluid.menu.no.radius.margin
          .ui.dropdown.item
            = @chapter.chapters_title
            i.icon.dropdown
            .menu
              == render 'chapter_nav'

    .horizontal.vertical.padding
      - @chapter.lessons.each do |l|
        .vertical.margin
          h2.ui.block.header = l.lesson_title
        .ui.two.column.stackable.grid
          - l.videos.each do |v|
            .column
              .ui.fluid.card.no.radius
                .content
                  .header
                    i.icon.music
                    = v.song_title
                  .meta = v.meta
                = link_to_play(v)

            - if v.play_type == 3
              .ui.modal data-modal="#{v.lesson.chapter_id}-#{v.lesson_id}-#{v.id}"
                .video.size
                  .video.fluid
                    iframe id="#{v.lesson.chapter_id}-#{v.lesson_id}-#{v.id}" frameborder=0 allowfullscreen
                    /iframe id="#{v.lesson.chapter_id}-#{v.lesson_id}-#{v.id}" src=v.url frameborder=0 allowfullscreen
javascript:
  var tag = document.createElement('script');

  tag.src = "https://www.youtube.com/iframe_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  $(document).ready( function() {
    // 3. This function creates an <iframe> (and YouTube player)
    //    after the API code downloads.
    var player;
    function loadVideo() {
      console.log('yo');
      player = new YT.Player('1-3-7', {
        videoId: 'M7lc1UVf-VE',
      });
    }

    $('.modal').modal({onHidden: function () {
      alert('stop!');
      player.stopVideo();
    }});

    $('.modal').modal({onShow: function() {
      alert('play!');
      loadVideo();
    }});
  });
  $(document).on("keydown", function(evt) {
    if(evt.which === 13){
    }
  });
	<!DOCTYPE html>
	<html>
	<head>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.0/lodash.js"></script>
	<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
	<link rel="stylesheet" href="./a.css">
	<meta charset="utf-8">
	<title>JS Bin</title>
	</head>
	<body>
	<div class='container'>
	<button class='btn btn-default'>Go!</button>
	</div>
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
	<div class="modal-content">
	<div id="player"></div>
	<!-- <iframe src="https://www.youtube.com/embed/Ae6gQmhaMn4" frameborder="0" allowfullscreen></iframe> -->
	</div><!-- /.modal-content -->
	</div><!-- /.modal-dialog -->
	</div><!-- /.modal -->
	<script>
	$('button').on("click", function() {
	$('#myModal').modal();
	});
	// 2. This code loads the IFrame Player API code asynchronously.
	var tag = document.createElement('script');

	tag.src = "https://www.youtube.com/iframe_api";
	var firstScriptTag = document.getElementsByTagName('script')[0];
	firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

	// 3. This function creates an <iframe> (and YouTube player)
	// after the API code downloads.
	var player;
	function onYouTubeIframeAPIReady() {
	player = new YT.Player('player', {
	videoId: 'M7lc1UVf-VE',
	});
	}

	$('#myModal').on('hide.bs.modal', function (e) {
	player.stopVideo();
	});
	$('#myModal').on('shown.bs.modal', function (e) {
	player.playVideo();
	});

	</script>
	</body>
	</html>
	- provide :title, "影音資料庫"
	- provide :subtitle, "#{ @chapter.chapters_title } \|"
	- provide :cover, image_path('cover.jpg')

	#library data-current-chapter=@chapter.id
	.horizontal.wrap
	#units
	.desktop.laptop.tablet
	nav.ui.four.item.fluid.no.radius.margin.menu.inverted.blue
	== render 'chapter_nav'
	.phone
	nav.ui.one.item.fluid.menu.no.radius.margin
	.ui.dropdown.item
	= @chapter.chapters_title
	i.icon.dropdown
	.menu
	== render 'chapter_nav'

	.horizontal.vertical.padding
	- @chapter.lessons.each do \|l\|
	.vertical.margin
	h2.ui.block.header = l.lesson_title
	.ui.two.column.stackable.grid
	- l.videos.each do \|v\|
	.column
	.ui.fluid.card.no.radius
	.content
	.header
	i.icon.music
	= v.song_title
	.meta = v.meta
	= link_to_play(v)

	- if v.play_type == 3
	.ui.modal data-modal="#{v.lesson.chapter_id}-#{v.lesson_id}-#{v.id}"
	.video.size
	.video.fluid
	iframe id="#{v.lesson.chapter_id}-#{v.lesson_id}-#{v.id}" frameborder=0 allowfullscreen
	/iframe id="#{v.lesson.chapter_id}-#{v.lesson_id}-#{v.id}" src=v.url frameborder=0 allowfullscreen
	javascript:
	var tag = document.createElement('script');

	tag.src = "https://www.youtube.com/iframe_api";
	var firstScriptTag = document.getElementsByTagName('script')[0];
	firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
	$(document).ready( function() {
	// 3. This function creates an <iframe> (and YouTube player)
	// after the API code downloads.
	var player;
	function loadVideo() {
	console.log('yo');
	player = new YT.Player('1-3-7', {
	videoId: 'M7lc1UVf-VE',
	});
	}

	$('.modal').modal({onHidden: function () {
	alert('stop!');
	player.stopVideo();
	}});

	$('.modal').modal({onShow: function() {
	alert('play!');
	loadVideo();
	}});
	});
	$(document).on("keydown", function(evt) {
	if(evt.which === 13){
	}
	});