Jiro Laboratory

C#、ASP.NET、JavaScript、Androidとか

Youtube

Youtube IFrame Player API のプレイヤーをページ背景にする(ミュート)

css でプレイヤーサイズをウィンドウサイズと同じにします。 また、z-index を指定してプレイヤーがメインコンテンツの背景になるようにします。 onPlayerReady イベントで mute() を呼び出せばミュートになります。 コードサンプル 背景動画に「ドット画像…

YouTube Data API (v3) でデータを取得する

少なくとも2種類の方法があります。 Google APIのクライアントライブラリを使う $.ajax を使う クライアントライブラリを使用するサンプルコードはOAuth2認証を行うサンプルしかありませんでしたので、APIキーを使って認証なしで実行できるサンプルコードを…

YouTube Player API を使った動画の再生

YouTube Player API を使うと JavaScript でYoutubeプレイヤーの操作を行うことができます。 動画の再生に必要な最小限のコードは以下になります。 <div id="player"></div> <script src="https://www.youtube.com/iframe_api" async></script> <script> var player; function onYouTubeIframeAPIReady() { player = new YT.Player('player', { videoId: 'M7lc…

bootstrap で Youtube 動画をレスポンシブに埋め込む

ここhttp://getbootstrap.com/components/#responsive-embedに答えが書いてあります。 <div class="embed-responsive embed-responsive-16by9"> <iframe class="embed-responsive-item" src="..."></iframe> </div> <div class="embed-responsive embed-responsive-4by3"> </div>