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を切っても表示崩れが起きないこともポイント高めです。

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