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

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

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

YouTubeとはユーザーがビデオをアップロード・共有・閲覧できるビデオ共有ウェブサイトです。

YouTube API

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

API

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

Q&A

0回答

476閲覧

YouTube APIの基本的な使い方が分かりません。

katopa165

総合スコア19

YouTube

YouTubeとはユーザーがビデオをアップロード・共有・閲覧できるビデオ共有ウェブサイトです。

YouTube API

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

API

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

0グッド

0クリップ

投稿2020/04/27 02:16

ご覧いただきありがとうございます。
現在サイト内にYouTubeの埋め込みをしようとして詰まっております。

何をしたいか

YouTube APIを使ってYouTubeをサイト内に埋め込みたい

出来てること

YouTubeの埋め込みと再生などビジュアルの部分は出来ています。

出来ないこと

現在YouTube APIをHTMLファイル内に記述しているため、
JSファイル内に記述したいのですが、JSファイル内に記述すると動画が埋め込まれなくなります。
JSファイル内に記述してある別のプログラムは実行されているのでHTMLファイルとJSファイルが接続されてない訳でもないようです。

知りたいこと

YouTube APIをJSファイル内で管理する方法

コード説明

success.htmlは動くのですが、
下のnotSuccessの組み合わせが動きません。
ご教授のほど、どうぞよろしくお願いいたします。

success

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>YouTube</title> 8</head> 9<body> 10 <div id="video" class="video"></div> 11 <script> 12 { const youtubeVideoID = "bAGgyJBE8IM"; 13 const tag = document.createElement('script'); 14 tag.src = "https://www.youtube.com/iframe_api"; 15 const iframePlayerApiScriptTag =       document.getElementsByTagName('script')[0]; 16 iframePlayerApiScriptTag.parentNode.insertBefore(tag, iframePlayerApiScriptTag); 17 18 function onYouTubeIframeAPIReady(){ 19 const player = new YT.Player('video', { 20 videoId: youtubeVideoID, 21 playerVars: { 22 'modestbranding': 1, 23 'autohide': 1, 24 'controls': 1, 25 'showinfo': 0, 26 'rel': 0, 27 'autoplay': 0 28 } 29 }); 30 } 31 } 32 </script> 33</body> 34</html>

notSuccess

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>YouTube</title> 8</head> 9<body> 10 <div id="video" class="video"></div> 11 <script src="./js/index.js"></script> 12</body> 13</html>

notSuccess

1 2(()=> { 3 const tag = document.createElement('script'); 4 tag.src = "https://www.youtube.com/iframe_api"; 5 const firstScriptTag = document.getElementsByTagName('script')[0]; 6 firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 7 8 function onYouTubeIframeAPIReady(){ 9 const youtubeVideoID = "bAGgyJBE8IM"; 10 const player = new YT.Player('video', { 11 videoId: youtubeVideoID, 12 playerVars: { 13 'modestbranding': 1, 14 'autohide': 1, 15 'controls': 1, 16 'showinfo': 0, 17 'rel': 0, 18 'autoplay': 0 19 } 20 }); 21 } 22 23})();

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

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

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

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

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

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.47%

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

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

質問する

関連した質問