【javascript】お気に入りのyoutube動画をランダムに表示させたい

第2回目ではボタンを押すと画像がランダム表示されるものを作成しました。画像ができるなら、次は動画でランダム表示ができやしないか・・・。

今回はyoutubeを使って動画をランダム表示させるコードを作ってみました。

第2回目のコードを編集したものとなっており、変更点をあげるとすると、var imglist = [ ];こちらの中身がyoutubeのiframeタグのsrc=” “になったこと、var element = iframe ~ youtubeの埋め込みコードを入れただけとなっております。

こちらの第3回目を行う前に、一度第2回目を理解してから進めてみて下さい。


index.html

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="css/style.css">   
</head>
<body>
    <div id="target"></div>
    <input type="button" value="水着ギャルの動画をみる!" id="bt"/>
    <script language="javascript" type="text/javascript">
    var target = document.getElementById( 'target' );
    var bt = document.getElementById( 'bt' );
    bt.addEventListener( 'click', function( e ) {
        var imglist = [
    "https://www.youtube.com/embed/CADblFPK9xQ",
    "https://www.youtube.com/embed/QrXEs8ZxoMY",
    "https://www.youtube.com/embed/uNAPzMmGcEo",
    "https://www.youtube.com/embed/54TsuVeZumU" 
    ];
    var selectnum = Math.floor(Math.random() * imglist.length);
    var element = '<iframe width="320" height="180" src=" ' + imglist[ selectnum ] + ' " frameborder="0" allowfullscreen></iframe>';
    target.innerHTML = element;
     }, false );
    </script>
</body>    
</html>

style.css

/**/

body {
    background-color: pink
}

img {
    width: 100%;
}

※動画はお好きなyoutubeの動画をお使い下さい。
 共有⇒埋め込みコードを押すと、iframeタグを取得することができます。

  • このエントリーをはてなブックマークに追加

関連記事

コメントは利用できません。

ピックアップ記事

  1. 第3回目ではボタンを押すとyoutubeの動画がランダム表示されるものを作成しました。今度はランダム…
  2. ワードプレスでオリジナルテーマを作ってみたい! 全くのイチからの作成手順をご紹介していきたいと思い…

ピックアップ記事

  1. 独学でプログラミング学習に挑戦したは良いが、結局挫折を繰り返す日々。   そんな挫折経験者や…
  2. ネットで調べると実に様々な方法が出てきます。 サーバーによっても様々なアプローチが。 今回私…
  3. 1.さくらVPSにPHP、MySQL、Ruby on Railsを設置。 これらを設置するまで…
  4. 他人様のコンテンツを引っ張ってきて、 自分なりにアレンジを加えた形で 独自のコンテンツとして提供…
ページ上部へ戻る