複数のYouTubeの動画等をページを開くたびにランダムに表示させる方法を教えてもらいました。

「乱数を発生させて…」

「これにこれを掛け算して…」

ん (´Д` )?

ちょっと、算数苦手でして…

なので、理解するのは追い追い。ということで、
これをセットで覚えておくことにしました。

表示したい動画分の数字を入れて
var rand = Math.floor( Math.random() * 3 );

そのあとは if文で分岐させる。
ランダム表示させたい分だけ記述すればOK!

本当は、少しずつ、JavaScriptも理解していかなければ…(T ^ T)

 

<script>
// 0〜2の乱数を発生
var rand = Math.floor( Math.random() * 3 );
console.log(rand);
if( 0 == rand ){
document.write(‘<iframe width=”590″ height=”255″ src=”https://www.youtube.com/***/***” frameborder=”0″ allowfullscreen></iframe>’);
} else if( 1 == rand ) {
document.write(‘<iframe width=”590″ height=”255″ src=”https://www.youtube.com/***/***” frameborder=”0″ allowfullscreen></iframe>’);
} else if( 2 == rand ) {
document.write(‘<iframe width=”590″ height=”255″ src=”https://www.youtube.com/***/***” frameborder=”0″ allowfullscreen></iframe>’);
}
</script>

ちなみに、phpに記述する場合はこんな感じになります。

<div class=”movie-wrap”>
<?php
$num = mt_rand(0,3);

if( 0 == $num ){ ?>
<iframe width=”490″ height=”235″ src=”https://www.youtube.com/embed/gHT8rIDlGxg” frameborder=”0″ allowfullscreen></iframe>
<?php } elseif ( 1 == $num ) { ?>
<iframe width=”490″ height=”235″ src=”https://www.youtube.com/embed/P_z2J1ZZM84″ frameborder=”0″ allowfullscreen></iframe>
<?php } elseif ( 2 == $num ) { ?>
<iframe width=”490″ height=”235″ src=”https://www.youtube.com/embed/F2xxxKctMWE” frameborder=”0″ allowfullscreen></iframe>
<?php } ?>
</div>

さらに、この動画部分をレスポンシブに対応させるには、

cssに以下の記述を追加すればOKです!

.movie-wrap {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}

.movie-wrap iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

 

レスポンシブ対応はこちらのページを参考にさせていただきました!

http://design.webclips.jp/youtube-movie-size/