2018/08/12(日)
ユーチューブ動画の埋め込み
ユーチューブの動画をブログやWEBサイトで表示する際、方法は色々あると思いますが、すぐに思いつくのは次の3つの方法です。
●1.シンプルなテキストリンク
●2.埋め込み形式(レスポンシブ非対応/モバイル非対応)
●3.埋め込み形式(レスポンシブ対応/モバイル対応)
●1.シンプルなテキストリンク
●2.埋め込み形式(レスポンシブ非対応/モバイル非対応)
●3.埋め込み形式(レスポンシブ対応/モバイル対応)

●1.シンプルなテキストリンク
https://youtu.be/Beaivs_StOk
●2.埋め込み形式(レスポンシブ非対応/モバイル非対応)
共有コード(iframeからはじまるコード)をそのまま貼り付ける方法で、とっても簡単ですが、レスポンシブデザインサイト(モバイル対応サイト)の場合、動画がはみ出してしまいます。
●3.埋め込み形式(レスポンシブ対応/モバイル対応)
CSS(WEBのデザイン情報)にひと手間加えることで、共有コードをそのまま埋め込むだけで、スマホなどで見ても伸び縮みして最適に表示されるようになります。無料のブログサービスやWEBサイトサービスはこの辺の対策がしてあるかもしれませんが、そうでなければ別途、対策が必要かと。
※CSSの設定はこちらを参考にさせていただきました。
https://youtu.be/Beaivs_StOk
●2.埋め込み形式(レスポンシブ非対応/モバイル非対応)
共有コード(iframeからはじまるコード)をそのまま貼り付ける方法で、とっても簡単ですが、レスポンシブデザインサイト(モバイル対応サイト)の場合、動画がはみ出してしまいます。
●3.埋め込み形式(レスポンシブ対応/モバイル対応)
CSS(WEBのデザイン情報)にひと手間加えることで、共有コードをそのまま埋め込むだけで、スマホなどで見ても伸び縮みして最適に表示されるようになります。無料のブログサービスやWEBサイトサービスはこの辺の対策がしてあるかもしれませんが、そうでなければ別途、対策が必要かと。
※CSSの設定はこちらを参考にさせていただきました。
夢彩図のご案内
夢彩図では、独自性や創造性を大切にしています。AIをはじめ、さまざまな技術が身近になる時代だからこそ、その人、その事業ならではの“らしさ”が、これまで以上に大切になると考えているからです。
そのような考えのもと、季節や色を通じて感性をひらく「季節のひと色」と、WEB・AI・デザインなどの話題を取り上げる「WEBトピックス」を随時配信しています。知性と感性、その両方を大切にしながら、夢彩図ならではのWEBのあり方を形にしています。
また、WEBサイト制作やカスタム機能制作、WEB編集室などを通じて、それぞれの事業が持つ価値や個性を、WEB上で伝わるかたちに整えるお手伝いもしています。
あなた自身、あるいは、あなたの事業の“らしさ”とは何でしょうか。
このようなコンテンツが、日々の情報収集や感性をひらくきっかけとして、また、ご自身や事業の“らしさ”について考えるきっかけのひとつになりましたら嬉しく思います。