質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.53%

  • HTML

    11116questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • WordPress

    8730questions

    WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

  • CSS

    7266questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • API

    1790questions

    APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

  • YouTube API

    107questions

    YouTube APIはYouTubeのビデオコンテンツと機能性をウェブサイト、アプリケーション、デバイスに統合することを可能にします。

youtube背景動画をスマートフォンでも表示する(YouTube IFrame Player API)

受付中

回答 0

投稿

  • 評価
  • クリップ 0
  • VIEW 62

yoso

score 18

前提・実現したいこと

wordpressのonetoneというテーマでホームページを作成しています。
そこで、スマートフォンでも背景動画としてyoutube動画を自動再生したいを考えています。

発生している問題

https://www.non-standardworld.co.jp/12814/
上記を参考に作成(コピペですが)
テストでは自動再生するのですが、実際にwordpressにアップすると動画の画面も現れず再生されない
再生できない環境用に設定している静止画が表示されます。

該当のソースコード

<div id="visual_header" class="background">
  <div class="background-wrap">
    <div class="background-movie">
      <div id="background-movie-player"></div>
    </div>
  </div>
</div>
.background {
  background: url(***.jpg) no-repeat center center;
  background-size: cover;
  position: relative;
  z-index: -2;
  width: calc(100vh * 1.78);
  height: 100vh;
  margin: 0 auto;

  .background-wrap {
    position: relative;
    top: 0;
    left: 0;
    z-index: -1;
    min-width: 100%;
    min-height: 100%;
    overflow: hidden;
    .background-movie {
      position: relative;
      display: flex;
      justify-content: center;
    }
    #background-movie-player {
      width: calc(100vh * 1.78);
      height: 100vh;
      flex: none;
    }
  }
}
// YouTube IFrame Player API の読み込み
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

// YouTubeの埋め込み
var ytPlayer;
function onYouTubeIframeAPIReady() {
  ytPlayer = new YT.Player('background-movie-player', {
            videoId: '2ZBTVjhKr5E',
            playerVars: { 
                'autoplay': 1,
                'controls': 0,
                'enablejsapi': 1,
                'iv_load_policy': 3,
                'disablekb':1,
                'showinfo':0,
                'rel':0,
                'start': 5,
                'modestbranding': 1
            },
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange,
        'onError': onPlayerError
      }
    }
  );
}




// プレーヤーの準備ができたとき
function onPlayerReady(event) {
  // 動画をミュートにする
  const player = event.target;
  player.mute();
  player.playVideo();
}

// onStateChangeのコールバック関数
function onPlayerStateChange(event) {
  var status = event.data;
  var playerWrap = $('#header .background-wrap');
  var names = {
    '-1' : '未開始',
    '0' : '終了',
    '1' : '再生中',
    '2' : '停止',
    '3' : 'バッファリング中',
    '5' : '頭出し済み'
  };
  //バッファリングの完了後、動画背景を表示させる
  if (status == 1) {
    $(playerWrap).css('opacity','1');
  } else {
    $(playerWrap).css('opacity','0');
  }
}

// errorの発生時
function onPlayerError(event) {
  var errorstatus = event.data;
  var playerWrap = $('#header .background-wrap');
  //何らかのエラーステータスが渡された場合、youtubeプレイヤーを削除する
  if (errorstatus !== '') {
    $(playerWrap).remove();
  }
}

個人写真の為、cssの画像部分
background: url(***.jpg) 
とさせていただいています、不都合がありましたらごめんなさい。

素人考えですがwordpress、onetoneというテーマ、が
動画の自動再生を妨げているのかなと思うのですが
どなたかお詳しい方よろしくお願いいたします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

まだ回答がついていません

同じタグがついた質問を見る

  • HTML

    11116questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • WordPress

    8730questions

    WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

  • CSS

    7266questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • API

    1790questions

    APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

  • YouTube API

    107questions

    YouTube APIはYouTubeのビデオコンテンツと機能性をウェブサイト、アプリケーション、デバイスに統合することを可能にします。