まずは実際の動作から。
以下の椎名林檎 – 長く短い祭と三代目 J Soul Brothers from EXILE TRIBE / Summer Madness feat. Afrojackのリンクをクリックすると各動画に切り替わります。
ソースは以下の通りです。
①jaueryのロード②YouTubePlayerの処理③YouTubeを設置するdivタグ④リスト(サムネイル)という感じです。
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script> <script type="text/javascript"> //<![CDATA[ // YouTubePlayerReady時の処理 function onYouTubePlayerReady(playerId) { "jQuery" in window && (function($) { $(function() { var ytPlayer = $("#obj-ytplayer").get(0); $(".list-movie-01 a").bind("click", function(event) { event.preventDefault(); var videoId = $(this).attr("href").replace(/https?:\/\/[0-9a-zA-Z\.]+\//, ""); ytPlayer.loadVideoById(videoId); }); }); }(jQuery)); } //]]> </script> <script type="text/javascript"> var ytPlayer2; // Player APIの非同期ロード (function (document) { var api = document.createElement("script"), script; api.src = "//www.youtube.com/player_api"; script = document.getElementsByTagName("script")[0]; script.parentNode.insertBefore(api, script); }(document)); // Player APIスタンバイ完了時の処理 function onYouTubePlayerAPIReady() { ytPlayer2 = new YT.Player("embed_movie", { width: 460, height: 350, videoId: "tF_fvr4TmpM", playerVars: { "rel": 0, "autoplay": 0, "wmode": "opaque" } }); } // 動画リストクリック時の処理 $(function () { $(".list-movie-02").on("click", "a", function (e) { e.preventDefault(); var videoId = $(this).attr("href").replace(/https?:\/\/[0-9a-zA-Z\.]+\//, ""); ytPlayer2.loadVideoById(videoId); }); }); </script> <div id="embed_movie"></div> <ul class="linkStyle01 list-movie-02"> <li><a href="https://youtu.be/3LVAmMxICoA">椎名林檎 - 長く短い祭M</a></li> <li><a href="https://youtu.be/tF_fvr4TmpM">三代目 J Soul Brothers from EXILE TRIBE / Summer Madness feat. Afrojack</a></li> </ul>
コメント