YouTube動画をコピペだけでWEBサイトに埋め込む
YouTube動画をWEBサイトに埋め込む
この記事では自分(自社)のサイトにYouTube動画を埋め込む方法を解説します。
「サイト内で動画を再生したい」という方は是非参考にしてみてください。
今回は段階的に解説していこうと思います。
貼り付けする動画は私がECサイトを制作するときに使用する「shopify」の動画を貼り付けてみます。
YouTube動画URLは
こちら
工程
1-1 サイトにYouTube動画を埋め込む
まずは埋め込みたいYouTubeを開きます。
動画の右下に「共有」と書かれたブロックがあるので、これをクリックします。
クリックすると、複数のアイコンが表示されます。
この中の「埋め込む」アイコンをクリックします。
クリックすると、動画の右側にHTMLなどが表示されます。
(HTMLを見慣れていない方は呪文のように見えるかもしれませんが大丈夫です！)
画像右下の「コピー」を押せば、埋め込む為に必要なHTML(埋め込みコード)がコピーできます。
(表示されているHTMLを直接コピーしても同じなのでOK)
これで埋め込む為の情報は全て取得しました。
次は自分のサイトにコピーした埋め込みコードを設置します。
この作業はとても簡単です。
貼り付け(右クリックして「貼り付け」を選択)するだけです！
表示を確認してみます。
動画が表示されました。
これで埋め込み作業は完了です。
サイト内で動画を再生することができます。
1-2 サイト内の動画サイズを変更する
次は表示サイズの変更方法を解説します。
「表示はできたけど、もっと大きくしたい」など表示サイズの変更が必要になることがほとんどだと思います。
ここからはHTML(別名：コード)を編集する作業になりますが、解説通りに行えば間違えることはありませんので、HTMLの理解が無い方でも安心してください。
まず、貼り付けしたコードを確認します。
width=”560″ height=”315″ src=”https:省略” title=”YouTube video player” frameborder=”0″ allow=”accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture” allowfullscreen>
こんなコードになっているはずです。
変更する前に少しだけコードの説明になりますが、内容としては、
①これは動画です
②動画はこの動画です
③横幅はこのサイズです
④縦幅はこのサイズです
ということが書かれています。
今回は③と④を変更します。
この内容がどこに書いてあるかというと、
コードの最初の部分「width=”560″ height=”315″」です。
widthは横幅、heightは縦幅という意味で、横の数字は縦横のサイズを決める数字(単位はpx)になります。
では、サイズを横幅900px、縦幅500pxに変更してみましょう。
・横幅変更
「width=”560″」この部分を「width=”900px”」にする。
・縦幅変更
「height=”315″」この部分を「height=”500px”」にする。
保存をして、もう一度サイトを見てみます。
どうでしょうか。
動画上下にあるカラフルな部分を基準に見ると、動画のサイズが大きくなったことがわかります。
この手順で、お好みの動画サイズを1px単位で設定ができます。
補足ですが、変更した数値に「px」を追加していますが、記述しなくてもサイズ変更はできますが、正式な記述方法が「数値＋単位」なので、数字だけでなく単位も加えることで表示のバグを防止することができます。
以上でYouTube動画を埋め込む方法の解説終わりです。
更に高度な表示サイズ変更や、自動再生については下記の記事で解説しますのでご活用ください。
