😃

VASTのテスト画面をテストしやすいよう大きくする方法

2025/08/19に公開

モチベーション

VASTの動作確認で下記テストページを使う際、画面が小さくて見切れるケースがあるので、
テスト画面を大きくしてテストしやすくしたい

やり方

ブラウザでconsole画面を出す(F12)
コンソール画面でコピペできるようにする

allow pasting

console画面で下記を入力し、サイズを変更する

(function() {
  const target = document.querySelector("#video-player video");
  if (!target) {
    console.warn("videoタグが見つかりません");
    return;
  }

  // videoタグとその親要素をすべて強制的に1920x1080に
  let el = target;
  while (el) {
    el.style.width = "1920px";
    el.style.height = "1080px";
    el.style.maxWidth = "none";
    el.style.maxHeight = "none";
    el.style.minWidth = "1920px";
    el.style.minHeight = "1080px";
    el.style.flex = "none";
    el.style.display = "block";
    el.style.position = "relative";
    el = el.parentElement;
  }

  // videoタグの表示方法を最適化
  target.style.objectFit = "fill"; // 全面に広げる
  console.log("すべての親要素を1920x1080に強制しました");
})();

現場からは異常です。それではまたー！

モチベーション

やり方

Discussion