Takako Style

Takako Style

トップ > 記事一覧 > ユーチューブ動画の埋め込み

ユーチューブ動画の埋め込み

2018/08/12(日)
ユーチューブの動画をブログやWEBサイトで表示する際、方法は色々あると思いますが、すぐに思いつくのは次の3つの方法です。


●1.シンプルなテキストリンク
●2.埋め込み形式(レスポンシブ非対応/モバイル非対応)
●3.埋め込み形式(レスポンシブ対応/モバイル対応)

●1.シンプルなテキストリンク
https://youtu.be/Beaivs_StOk


●2.埋め込み形式(レスポンシブ非対応/モバイル非対応)

共有コード(iframeからはじまるコード)をそのまま貼り付ける方法で、とっても簡単ですが、レスポンシブデザインサイト(モバイル対応サイト)の場合、動画がはみ出してしまいます。



●3.埋め込み形式(レスポンシブ対応/モバイル対応)

CSS(WEBのデザイン情報)にひと手間加えることで、共有コードをそのまま埋め込むだけで、スマホなどで見ても伸び縮みして最適に表示されるようになります。無料のブログサービスやWEBサイトサービスはこの辺の対策がしてあるかもしれませんが、そうでなければ別途、対策が必要かと。


※CSSの設定はこちらを参考にさせていただきました。

Comment Box is loading comments...