株式会社リソース・シェアリング スポンサードサーチ
企業サイトやECサイトで動画を活用するケースが増えてきました。
また、企業側も以前は動画の著作権を気にして著作権保護ができる動画配信サービスを利用するプロジェクトが多かったのですが、最近では動画がソーシャルメディアでの拡散をされる方が望ましいという事で、YouTubeを利用するクライアントが大半となりました。
そこで、今回はYoutubeにアップロードした動画をWebサイトに埋込む方法についてご紹介します。
YouTubeの動画を埋め込む方法
まず、埋め込みたい動画をYouTubeで表示します。
今回は、WORLD ORDERの”ONE STEP FORWARD”のプロモーションビデオを例にしました。
この時に、タイトルの下にある「共有」をクリックすると、ポップアップが表示されます。
動画の埋め込みコードを取得する
ポップアップの下にある、「埋め込み」をクリックして埋め込みコードを取得します。
取得したコードはこちら。
<iframe width="560" height="315" src="https://www.youtube.com/embed/zMcTRiAq2Y4" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
こちらのコードをコピー＆ペーストするだけでも動画の設置は可能です。
ただし、この状態だとレスポンシブ対応になっていませんので、端末によっては動画の全画面が表示されない場合があります。
そこで、スマートフォンやタブレットでの視聴を想定し、CSSを使って端末ごとに最適化するレスポンシブ対応にします。
CSSでレスポンシブ対応
まずは「movie」というクラスを持たせたdivタグで動画の埋込コードを囲います。
<div class="movie">
さらに、レスポンシブ対応にするCSSを追加します。
.movie{
position:relative;
width:100%;
padding-top:56.25%;
}
.movie iframe{
position:absolute;
top:0;
right:0;
width:100%;
height:100%;
}
これを追加したサンプルがこちら。
YouTubeレスポンシブ対応デモ
これで、動画をレスポンシブ対応にできました。
Bootstrapの場合は用意されているものを使う
Bootstrapで作られているWebサイトの場合には、元々対応方法が用意されています。
以下のように、使いたいアスペクト比に応じてコードを使い分けます。
<!-- 21:9 aspect ratio --> <div class="embed-responsive embed-responsive-21by9"> <iframe class="embed-responsive-item" src="..."></iframe> </div> <!-- 16:9 aspect ratio --> <div class="embed-responsive embed-responsive-16by9"> <iframe class="embed-responsive-item" src="..."></iframe> </div> <!-- 4:3 aspect ratio --> <div class="embed-responsive embed-responsive-4by3"> <iframe class="embed-responsive-item" src="..."></iframe> </div> <!-- 1:1 aspect ratio --> <div class="embed-responsive embed-responsive-1by1"> <iframe class="embed-responsive-item" src="..."></iframe> </div>
16:9だとこんな感じ。
WordPressの場合、「AddQuicktag」でボタン追加
WordPressを使っている場合、このdivタグを埋め込むのにPlugin（プラグイン）の「AddQuicktag」を使って予めボタンとして登録しておく事で、簡単にレスポンシブ対応にできます。
「AddQuicktag」の使い方については、AddQuicktagの使い方 デザイン性の高いクライアントワークに必須なWordPress Pluginをご覧ください。
WebサイトやECサイトに動画の埋込を検討されてる方は、ぜひやってみてください。
AI時代だからこそ、戦略は人と一緒に考えることが、最初の一歩です。
開発やコンテンツ生成はAIが担える時代になりました。しかし、何を作るか・どこを目指すかという問いに答えるのは、依然として人の仕事です。
DX推進や新規事業の立ち上げで壁にぶつかる企業の多くは、ソリューションの導入や社内人材への丸投げに終始し、課題の本質が言語化されないまま進んでしまっています。
経営とITの両方を理解した人間が、経営者と並走しながら要求定義・要件定義の段階から一緒に考える。AIはこのプロセスを補助できますが、主役にはなれません。
まだ課題が言語化できていない段階からでも、遠慮なくご相談ください。一緒に考えます。
AIが生成できないのは「実績と信頼」
ECサイトやマーケットプレイスサイトはCS-Cart国際版（公式）という選択肢
AIはコードを書けます。しかし、長年の実運用で磨かれたロジックや、世界中の事業者が検証したセキュリティを、プロンプト一つで再現することはできません。
CS-Cart国際版（公式）は、自社EC・越境EC・BtoB EC・マーケットプレイスに対応した豊富な実績ある機能をパッケージとして提供しています。
構築コストを抑えながら、堅牢なECサイトを立ち上げることができます。
スポンサードサーチ