常連

こんにちは！

前回、LPの案件で質問させてもらったものです。
ここでの答えを参考に作ってはみたのですが、なぜかリンクの文字だけ表示されません。

どこが変なのでしょうか。

今作ってる途中のURLを貼るので、具体的に教えてもらうと助かります。
http://devserver-room8.cloudapp.net/movie/

他の知り合いに聞いたらsetintervalとdisplay: noneを使うと言われたのですがどちらがいいのかわかりません。

```HTML

<div id="container" class="main980">
    <div id="movie1">
    <video id="video1"  autoplay class="video">
        <source src="img/sample.mp4">
    </video>
    <div id="play1" class="play">
        <ul>
            <li>
                <a href="https://www.youtube.com/" target="_blank">You Tube</a>
                
                <button id="next1"><a href="#video2">次の動画を再生</a></button>
            </li>
        </ul>
    </div>
    </div>
    <div class="img">
        <img src="img/menu-btn01.png" alt="リノベーションだったら">
    </div>
  <div id="movie2">
  <video id="video2" class="video">
        <source src="img/sample.mp4">
    </video>
    <div id="play2" class="play">
        <ul>
            <li>
                <a href="https://www.youtube.com/" target="_blank">You Tube</a>
                
                <button id="next1"><a href="#video3">次の動画を再生</a></button>
            </li>
        </ul>
    </div>
    </div>
    <div class="img">
        <img src="img/menu-btn02.png" alt="もっと詳しく知りたい人の為に">
    </div>
    <div id="movie3">
    <video id="video3" class="video">
        <source src="img/sample.mp4">
    </video>
    <div id="play3" class="play">
        <ul>
            <li>
                <a href="https://www.youtube.com/" target="_blank">You Tube</a>
                
                <button id="next1"><a href="#video4">次の動画を再生</a></button>
            </li>
        </ul>
    </div>
    </div>
    <div class="img">
        <img src="img/menu-btn03.png" alt="一体何が">
    </div>
    <div id="movie4">
    <video id="video4"  class="video">
        <source src="img/sample.mp4">
    </video>
                                                                                111,50
</footer>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="js/custom.ui.video.js"></script>
<script type="text/javascript">  
$(function() {
    var video1 = document.getElementById("video1");
    var play1 = document.getElementById("play1");

    
    /*
    video1.addEventListener("timeupdate", function(ev) {
        // もし「shown」クラスがvar playに含まれていて、video1のcurrentTimeが10より上だったら
        if (!play.classList.contains("shown") && video1.currentTime > 10) {
            play.classList.add("shown");
        }
    });
    */

    // video1の再生が終了したら
    video1.addEventListener("ended", function() {
        alert('video1の再生が終了しました。');

        // リンク文字を表示
        play1.classList.add("shown");

    });

    // 「次の動画を再生ボタン」を押したら
    $('next1').on('click', function() {
        // 次の動画を再生
    });

});
</script>
<script>
$(function(){
    //#で始まるアンカーをクリックした場合の処理
    $('a[href^=#]').click(function(){
        //スクロールの速度
        var speed = 500;
        //アンカーの値取得
        var href = $(this).attr("href");
        //移動先を取得
        var target = $(href == "#" || href == "" ? 'html' : href);
        //移動先を数値で取得
        var position = target.offset().top-130;
        //スムーススクロール
        $("html, body").animate({scrollTop:position}, speed, "swing");
        return false;
    });
});
</script>


</body>
</html>

~             ```



```                                                                      139,22       末尾```

```css

}
 /*--------------------------------
メインコンテンツ
--------------------------------*/

.video {
    position: absolute;
    margin-top: 20px;
    height: 455px;
    width: 100%;
    z-index: 0;
}

#movie1 {
    position: relative;
    overflow: hidden;
}

#movie1 .play {
    opacity: 0.6;
    overflow: hidden;
    top: 0;
    left: 0;
    width: 918px;
    height: 455px;
    color: white;
    text-indent: 100%;
    text-align: center;
    z-index: 1;
    visibility: hidden;
}
#movie1 .play.shown {
    visibility: visible;
}
#movie1 .play ul {
    position: absolute;
    top:10%;
    width: 100%;
    margin: 0 auto;
    padding: 0px;
}
#movie1 .play ul li a {
    color: white;
}

ul li {
    list-style: none;
}
.img {
    text-align: center;
    margin-top:25px;
}
 #movie2 {
    position: relative;
    overflow: hidden;
}

#movie2 .play {
                                                                                  111,2-93      43%

コード
```

今こんな感じです！

ほんまに悩んでます。教えてください

	@@ -1 +1 @@
1	- 動画再生中にリンクを表示をさせる方法
1	+ 【緊急！】動画再生中にリンクを表示をさせる方法

質問編集履歴