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

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

新規登録して質問してみよう
ただいま回答率
85.48%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

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

Q&A

0回答

366閲覧

iframeで埋め込んだYouTube動画をスマホでYouTubeAPIを使って自動再生させたい

kag5612

総合スコア0

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

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

0グッド

1クリップ

投稿2023/01/15 07:51

編集2023/01/15 08:01

前提

以下のサイトを参考にしました
https://newsite-make.com/youtube-auto-play/

実現したいこと

YouTubeの仕様でスマホからアクセスした場合は自動再生がオフになりますが、
Javascriptでスマホからのアクセスでも自動再生をさせたいです

###試したこと

以下のコードを使いました

・HTML

<div class="movieWrap"> <div id="js-main-movie"></div> </div>

・CSS
.movieWrap{
position: relative;
padding-bottom: 56.25%; /* アスペクト比16:9の場合 /
padding-top: 30px;
height: 0;
overflow: hidden;
margin-bottom: 2rem; /
YouTubeの下に余白をつける */
}

.movieWrap iframe{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

・Javascript
//<script>タグを生成
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

//iframeタグとプレイヤーを作成します
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('js-main-movie', { //js-main-movieはHTMLのid属性の値と同じ
videoId: 'TY_eL4FyFSA', //aqa9h-nL-TAはYouTubeの動画ID
height: '360',
width: '640',
playerVars: {
controls: 1,
autoplay: 1,
disablekb:1,
enablejsapi: 1,
iv_load_policy: 3,
playsinline: 1,
rel: 0,
autohide:0,
},
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}

});
}

//YouTube APIは↓の関数を呼び出す
function onPlayerReady(event) {
event.target.mute();
event.target.playVideo();
}

//プレイヤーの状態が変化するとYouTube APIは↓の関数を呼び出します
//プレイヤーが終了するとまた動画の再生をします
function onPlayerStateChange(event) {
var ytStatus = event.target.getPlayerState();
if (ytStatus == YT.PlayerState.ENDED) {
player.mute();
player.playVideo();
}
}

発生している問題・エラーメッセージ

PCからのアクセスでは自動再生されるが、スマホからのアクセスでは自動再生されない

お手数おかけしますが、解決策をご教示いただけますと幸いです。

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問