iframeを使う方法
簡単で手軽な方法です。
YouTubeのプレイヤーのしたの共有ボタンを押すとリンクの共有の中に「埋め込み」という項目があります。
こちらをクリックするとiframeのタグが表示されるので埋め込みたい部分にコピペすればOKです。
仕様は変更になることもあるのでざっくりとご紹介。
詳細はググると丁寧にキャプチャー画像などを使って丁寧に説明してくれているサイトもあるので参考までに。
iframeのレスポンシブ
iframeのタグをdivで囲みcssで調整することでレスポンシブ対応が可能です。
以下がサンプルコード
※ 「HTML5でサイトをつくろう 」のサイト記事より参照してますので詳しくはサイトをご確認ください。
.クラス名{
position:relative;
width:100%;
paddingtop:56.25%;
}
.クラス名 iframe{
position:absolute;
top:0;right:0;
width:100%;
height:100%;
}
ifarameのオプション
srcのURLの一番後ろに「?&autoplay=1」を追加すると 自動再生になります。
その他もろもろの設定はこちらに記載してます。
apiを利用する
こちらは埋め込みたい場所に以下のHTMLを設置し、JavaScript で設定する方法。
HTML
<div class="video-area">
<div id="video"></div>
</div>
JavaScript
// YouTubeの埋め込みfunction onYouTubeIframeAPIReady() {
ytPlayer = new YT.Player(
'video', // 埋め込む場所の指定
{
videoId: 'xxxxxx', // YouTubeのvideoIdを入れる
playerVars: {
loop: 0, // ループしない
controls: 1, // コントローラー表示
autoplay: 0, // 自動再生オフ
rel: 0, // オススメ動画を表示させない
showinfo: 1 // タイトル表示
},
events: {
'onReady': onPlayerReady
}
}
);
}
レスポンシブ対応にするなら playerVars に height: "100%",
width: "100%",
を追加すると簡単に設定できます。
それ以外の設定は先ほど紹介したパラメーターの設定を参照してください。
videoId はYouTubeのURLの語尾にある「watch?v=xxxxxx」の「xxxxxx」部分です。
ボリュームについて
上記 JavaScript の後に以下のコードを追加するとミュートにすることが出来ます。
function onPlayerReady(event) {
event.target.setVolume(0);
}
音量は0-100まで指定できるようです。
ただしスマホはデバイスにに依存するそうなので event.target.mute(); を使うこともできますが、スマホだとミュートを解除できないようなので、どちらを使うべきか、、、という感じではありますが。
サイトによって使い分けると良いかもです。
コメント