ブログ運営

Youtube動画を埋め込みしてスマホサイズにレスポンシブ化してみよう!

投稿日:

Youtube動画にある埋め込みコードを、

自分のWordPressなどのブログやホームページに埋め込む(共有する)ことで、

簡単にお気に入りの動画をアップすることができます。

 

しかし、

PC用として見やすい大きな画面表示で動画を貼り付けてしまうと、

それをスマートホンで見てみると、

なんとスマホ画面からYoutube動画がおもいっきりはみ出してしまう。

 

画面が大きいPCで見る分には何の問題もありませんが、

画面の小さいスマホサイズだと表示が完全に崩れてしまっているんです!

 

こんな感じにはみ出しちゃっています。

 

youtube-responsive1

 

これでは、スマホで見る人は、違和感感じちゃいますよね。

スッキリ収まっていないのですから。

見る気も失せてしまいます。

 

そこで、PC表示はもちろんのこと、

スマホで見たときにも、

自動で動画画面を最適なサイズに変換してくれる方法を紹介しようと思います。

 

埋め込みしたYouTube動画をスマホサイズにレスポンシブ化する方法です。

 

CSSを利用した簡単4ステップカスタマイズです。

 

スポンサーリンク

はみ出したYoutube動画をスマホサイズに自動最適化する4つのステップ

埋め込みたいYoutube動画を用意する。

まずは、Youtubeや埋め込みたいYoutube動画を投稿しているサイトから、

埋め込みたい動画の視聴画面に移動します。

そこにある埋め込みコードをコピーしてきます。

 

youtube-responsive2

 

埋め込みコード取得方法

①動画画面下”チャンネル登録”の下にある「共有」を選択すると、
②「共有」「埋め込みコード」「メール」とプルダウンメニューが表示されますので、埋め込みコードを選択します。
③その表示された埋め込みコードをコピーします。
④(動画サイズを変更したい場合は、「もっと見る」からサイズの選択ができます。)

 

クラス名を指定します。

次に、あなたのブログやホームページ内の動画を表示したい記事の場所に、

下記のコードをコピーします。

 

 

divタグにあるclassは、好きなクラス名に変更できます。

<div class="youtube">など。

 

そして、<div>と</div>の間に、

コピーした埋め込みコードを貼り付けます。

 

 

CSSを追記する。

先程つけたクラス名で、以下のコードをCSSスタイルシートに追記する。

追記する場所は、

WordPressの「外観」の”テーマの編集”→画面右端のスタイルから

CSS※を選択して以下のコードを貼り付けます。

(※どのCSSに貼り付けるかはテーマ(テンプレート)によって違ってきますので、すべてのCSSに貼り付けて確認してみてください。)

 

 

スマホサイズで確認してみよう。

スマホでちゃんとレスポンシブ化されているか確認してみよう。

 

こちらのサイトでは、

URLを入力するだけで、iphoneやipadなど

色々な画面サイズを同時に確認できるとても便利なサイトですよ。

 

http://html5-lab.jp/checker/
(新しいページで開きます。)

 

スポンサーリンク

よく読まれている記事

1
2017年スーパー戦隊は「宇宙戦隊キュウレンジャー」のキュータマ!?937 いいよ

新情報続々☆こちら、今作のコンセプトアートを手掛けて下さったのは漫画家の久正人さん!宇宙船デザイン、敵デザインを中心にデザイナーさんとしてもご参加頂いてます! また今回はキョウリュウジャー、ニンニンジ ...

2
エグゼイドのおもちゃ飽きたらどうする?子を持つ親の仮面ライダーの取り扱い方2,740 いいよ

仮面ライダー適齢期の子供を持つパパママ、今度のエグゼイドのおもちゃはなにかもう手に入れた? 手に入れるのはいいけどさ、子供が飽きたときそのおもちゃどうするよ。 今回は仮面ライダーのおもちゃの取り扱い方 ...

3
【コピペ可】AFFINGER4のトップページへ戻るボタンをカスタマイズ262 いいよ

AFFINGER4のトップページへ戻るボタンは、なにも設定をしていない状態だと、「おまえ、ほんとにそこにいるの!?」って言うくらい影が薄い存在である。 というか、目を凝らしても見えないほどの薄さなのだ ...

4
成田山初詣オイラ流。うなぎと屋台と時々占い730 いいよ

オイラの家族は毎年初詣に成田山新勝寺にお参りしに行くのが恒例だ。 もうかれこれ、15年以上も成田山に通っている。 初めて成田山に初詣に行くってあなたに、オイラ流の成田山参拝ツアーを紹介しようと思う。 ...

5
インフルエンザ予防接種したのに感染した!ウチはもうやめたよ。278 いいよ

毎年、友人や親戚の子供など身の回りの人たちから、こんな嘆きをもらう。 「せっかくインフルエンザ予防接種したのに感染しちゃった!」と。   保険がきかないお高い予防接種代を毎年支払い、 泣き叫 ...

6
チュチュベビーで虫歯菌をやっつけろ!ヨーグルトが健康な歯を作る!432 いいよ

なに~!? L8020乳酸菌が虫歯菌をやっつけてくれる! ヨーグルトいわゆる乳酸菌を食べて、健康な歯が保てるだと~。 ここ最近の出来事でオイラのちょっとした驚きのニュースだ。   3歳までに ...

-ブログ運営
-, , , ,

Copyright© OIRAGIKYU , 2017 AllRights Reserved.