Help us understand the problem. What is going on with this article?

【Youtube Player API】 YouTube自動再生をコピペで完結

More than 1 year has passed since last update.

1分でYouTubeのURLを埋め込んで自動再生させる(コピペ)

alt

(一応、【要件】) 表示されたら動画を6秒間再生したあと、動画を停止。

▼表示させたいviewに下をコピペ

index.html.rb
<div id="player"></div>

▼表示させたいjsに下をコピペ

application.js
var tag = document.createElement('script');

tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
  height: '360',
  width: '640',
  videoId: 'bjmBJ1Fl0cs',
  events: {
    'onReady': onPlayerReady,
    'onStateChange': onPlayerStateChange
  }
});
}

function onPlayerReady(event) {
  event.target.playVideo();
}

var done = false;
function onPlayerStateChange(event) {
  if (event.data == YT.PlayerState.PLAYING && !done) {
    setTimeout(stopVideo, 6000);
    done = true;
  }
}
function stopVideo() {
  player.stopVideo();
}

うまくできたら下の動画が自動再生される

http://www.youtube.com/watch?v=bjmBJ1Fl0cs
IMAGE ALT TEXT HERE
補足

youtubeURL採取方法はこれ

https://bazubu.com/how-to-embed-youtube-to-wp-23776.html

取ってきたURLはだいたいこんな感じ

<iframe width="560" height="315" 
src="https://www.youtube.com/embed/bjmBJ1Fl0cs"
frameborder="0" 
allow="accelerometer; 
autoplay; 
encrypted-media; 
gyroscope; 
picture-in-picture" 
allowfullscreen>
</iframe>

上のコード中のsrc="https://www.youtube.com/embed/bjmBJ1Fl0cs"の中のbjmBJ1Fl0csvideoId : 'ここ';にコピペで色んなYouTubeを自動再生できる

参考記事:https://developers.google.com/youtube/player_parameters?hl=ja
    :http://bashalog.c-brains.jp/15/02/25-100000.php

以上

告知

今、進撃のITコミュニティで一緒に活動してくれる方を募集しています。
参加は無料です。
下に参加URLを貼ってます。
管理者はブロックチェーン実務経験あります。
参加資格はプログラマーからマーケター、AIやブロックチェーン、動画編集者やディレクター、youtuber、インスタグラマーも対象です。
進撃のIT.png

進撃のIT Facebook
https://www.facebook.com/groups/612023275874253/
進撃のIT Slack
https://attack-on-it.herokuapp.com/
進撃のIT Twitter
https://twitter.com/IT13389135
進撃のIT Qiita記事
https://qiita.com/f___juntaro_/items/81136c85a8002cc442ac

___xxx_
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした