Webデザイン

Webサイトに表示する動画をアクセス毎に変えたい！

どうも、でんです！WeJaのWebサイトには、メンバーのichiinekiが制作した動画がトップページに掲載されています。最近までは第二作目のみを表示していたのですが、どうせならということで、両方の動画を表示することになりました。今回の記事では、Webサイトの表示される動画を、アクセス毎に変えるために書いたコードについて解説します！

実際に記述したコード

２種類の動画をWebサイトに掲載し、アクセスごとにどちらかのみが表示されるようにします。

HTML

<div class="MV">
  <video id="video1" src="<?php bloginfo('template_directory'); ?>/video/topvideo.mp4" loop autoplay muted playsinline></video>
  <video id="video2" src="<?php bloginfo('template_directory'); ?>/video/topvideo.mp4" loop autoplay muted playsinline></video>
</div>

CSS

.MV video:nth-of-type(2) {
	display: none
}

事前にHTMLで2本の動画を読み込み、CSSで2つ目のvideo要素を非表示にするように設定します。

JS

function shuffleContent(container) {
  var content = container.find("> *");
  var total = content.length;
  content.each(function() {
    content.eq(Math.floor(Math.random() * total)).prependTo(container);
  });
}

$(function() {
  shuffleContent($(".MV"));
});

【jQuery】ページを読み込む度に要素を並び替える(ネットショップ語り)を参考にさせていただきました。
.MVの子要素の順番をランダムにしています。そうすると非表示対象が変わり、結果的にランダムに動画を表示することができました。

おそらく、考え得る限りで最も簡単な方法だと思います。掲載する動画が増えても否定疑似要素を使えばOKですからね。また、JSを切っても表示崩れが起きないこともポイント高めです。

ただし、あまりにも掲載する動画が増えると表示速度が遅くなります。数あるコンテンツの中からランダムで表示したい場合は、別の方法で実装すると良さそうです。

まとめ

今回はJSによる要素の並び替えとCSSによって、ランダム表示を実装しました。前回はWordPressのfornt-page.phpについての記事を書きましたので、そちらもご覧ください。


front-page.phpを修正しても反映されなかったので原因を調べてみた

この記事を書いた人:Den

Den
　

新着記事