youtube embed

- 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 src=v.url frameborder=0 allowfullscreen

script
  $(document).ready(
    // 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)
    var player;
    function onYouTubeIframeAPIReady() {
      player = new YT.Player('player', {
        height: '390',
        width: '640',
        videoId: 'MYp9TIHZLk4',
        events: {
          'onReady': onPlayerReady,
          'onStateChange': onPlayerStateChange
        }
      });
    }
    $('.modal').modal({onHidden: function() {
      alert('hihi');}
    });
  )