RSSを購読する
follow us in feedly
ふかふか交易所 | ネットの情報をわかりやすくお届け!
RSSを購読する
follow us in feedly

ニュータウンシリーズ まとめ

マインクラフト関連記事 まとめ

VR関連記事 まとめ

トップ ゲーム 動画 ホームページ 掲示板 お問い合わせ サイトマップ ページ下部へ

ホームページカテゴリ 新着記事

サイト内検索

過去7日間の人気記事

  • 総合
  • ゲーム
  • 動画
  • ホームページ

ホーム > ホームページカテゴリー No.41 ~ No.50 > 記事No.45

ホームページにYoutube動画を埋め込んだ際にレスポンシブ対応させる方法

← 前の記事

次の記事 →

youtube_responsive

こんにちは、ふかふかです!

ホームページにYoutubeの動画を埋め込んで再生できるようにしたのはいいものの、スマホなどで表示した際に、動画の横幅が画面サイズに合わなくてはみ出てしまう!...なんてことになったりはしていませんか?

そんな時でも大丈夫!今回紹介する簡単な解決方法を用いれば、Youtube動画を様々なデバイスにレスポンシブ対応(サイズ対応)させることができます!

Youtube埋め込みコードの記述

Youtubeの動画を埋め込む際、Youtube動画ページの"共有"→"埋め込みコード"をコピーして張り付けてますが、そのときのコードは以下のような感じになっていると思います。

コード例(編集前):

<iframe width="560" height="315" src="https://www.youtube.com/embed/aThCr0PsyuA" frameborder="0" allowfullscreen></iframe>


width(横幅)とheight(縦幅)があらかじめ指定されていますね。

レスポンシブに対応させるためには、widthを"100%"、heightを"auto"にしてください。

また、CSSの方でも編集を行うために、埋め込みコード全体を適当な属性を付けた<div></div>で囲んでおいてください(私の場合は"youtube"というクラス属性を与えています)。


コード例(編集後):

<div class="youtube">
<iframe width="100%" height="auto" src="https://www.youtube.com/embed/aThCr0PsyuA" frameborder="0" allowfullscreen></iframe>
</div>

赤字部分が追加or変更した部分です。


CSSの編集

次に、上で埋め込みコードに割り当てた属性のCSSを編集します。

と言っても、CSSに以下のコードをコピーして貼り付けてるだけでOKです。

※.youtubeの部分は、自身が上で指定した属性に合わせてください。


以上で作業は完了です!

これで様々なデバイスの横幅に応じて、Youtube動画のサイズが変化すると思います。きちんとレスポンシブになっているかどうか、ご自身で確認してみてくださいね!

関連記事はこちら

- ホームページをスマホ対応(レスポンシブ)にする最も簡単な方法 ...

- ホームページにアコーディオンのようなフォトスライドを簡単 ...

- セキュリティソフト"Norton(ノートン)"に自分のホームページを ...

- Nortonへサイト評価の申請後、いつまで経っても未評価のままの ...

- ホームページの記事上部にシンプルな目次を簡単に設置する ...

- iPhone・Androidアプリのダウロードリンクを簡単に生成することの ...

- ホームページに使えるアイコンや背景画像などを配布している ...

この記事に対するコメント

Comment Form is loading comments...

過去7日間の人気記事

マインクラフト関連記事 まとめ

VR関連記事 まとめ

Aviutl(動画編集)関連記事まとめ

AR関連記事 まとめ

ご意見・ご質問等は 掲示板へ!

コメントを公開されたくない場合は メッセージフォームへ!


当サイトについて  月極広告の募集

©Copyright fukafuka295.jp 2016 All rights reserved.

トップ ゲーム 動画 ホームページ 掲示板 お問い合わせ サイトマップ ページ上部へ