YouTube Player APIを使用してYouTube動画の再生終了後にバナーなどの要素を出現させる方法（iframeタグを使用）のデモページ

.wrap {
    width: 768px;
    margin: 50px auto 0;
   }

  #movie {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
  }

  #movie iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .movie_btn {
    display: none;
    width: 350px;
    margin: 50px auto 0;
  }

  .movie_btn a {
    display: block;
    padding: 30px 0;
    text-align:center;
    font-weight: 700;
    color: #fff;
    background: #c00;
  }

  @media screen and (max-width:640px){
    .wrap {
      width: 100%;
    }
  }
  

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

      function onYouTubeIframeAPIReady() {
        player = new YT.Player("player",{
          events: {
            'onStateChange': onPlayerStateChange
          }
        });
      }

      function onPlayerStateChange(event) {
        var ytStatus = event.data;
        if (ytStatus == YT.PlayerState.ENDED) {
          $('.movie_btn').fadeIn('slow');
        }
      }