Oct 14, 2015

YouTubeを埋め込む(レスポンシブデザイン)

最近はホームページで動画をよく見かけます。
動画で伝えることでユーザーへの信頼度アップに繋がりますし、ホームページでの滞在時間も長くなる傾向があります。
何よりも活字とは違って、イメージとしても残りやすいのでユーザー感情を左右できる可能性が多いにありますよね。
 
では、SEO的にはと言うと、直接的に関係があるとは言いにくいですが、少なくてもYouTubeのリンクからのアクセスは見込めます。
 
では、ホームページへの設置の仕方はというと、実は簡単です。
アップしたYouTubeのページにある『共有』→『埋め込みコード』と進めば、コードが表示されてサイト内に貼り付けるだけです。
 
ただ、レスポンシブサイトの場合はそのまま貼り付けるだけでは、サイズが合わない場合が多々あります。
特に高さ指定なんてすると、スマホで見た時ににょーんって長くなります。
 
なので、CSSでの調整が必要となります。
 

 
CSSに下記コードを追加して、class指定することでレスポンシブサイトにも対応できます。

.youtube {position: relative;width: 100%;padding-top: 56.2%;}
.youtube iframe {position: absolute;top: 0;right: 0;width: 100% !important;height: 100% !important;}
 

 
最近の設置した例です。自民党の大串先生のウェブサイトです。
 

 
スマートフォンで見た時もすっきり収まっています。
 
ホームページは訪れたユーザーに対して見やすいサイトが一番ですので、ちょっとした手間もぜひ取り入れて下さいね。
 
 

LINEで送る

関連記事