YouTube動画をブログにレスポンシブに埋め込む方法

今回は、【YouTube動画をブログにレスポンシブに埋め込む方法】について解説します。

 

プラグインを使ってレスポンシブにする方法もありますが
文頭に動画を組み込んだ場合、ショートコードが表示されてしまう事があります。

youtube0101

 

これだと、カッコ悪いので、ちょっとカスタムしてレスポンシブ化する方法について解説します。

 

CSSに1行追加してYouTubeをレスポンシブ化しよう!

【ダッシュボード】⇒【外観】⇒【テーマの編集】から、【style.css】を開きます。

そして、そのCSSデータの最後に以下の1行を追記させて下さい。


iframe{ width:100%; }

追記できたら、保存をして完了です。

 

次は、YouTube動画を、埋め込み処理すればOKです!

 

YouTube動画をブログ内に埋め込み表示させる方法

まずは、表示させたい動画のページを開きます。

そして、下記画像にもある共有ボタンクリックします。

douga01

 

すると、様々なブログのアイコンが出てきますが、
そこではなく、埋め込みコードという項目をクリックします。
サイズの変更も可能です。
サイズを変更したい場合は、先にサイズ指定してからボックス内のコードをコピーしてください。

douga02

 

表示される埋め込みコードを後は投稿ページの
テキストモードにしてコピペすればOKです。

douga03

 

完成するとこうなります。

こんな感じです↓

 

尚、埋め込みコードが表示されるボックスの下の動画のサイズ好みのものがない場合
埋め込みコードの下記数値を変更すると、サイズを調整できます。

width="数字" ⇒動画の横幅

height="数字" ⇒動画の縦幅

 

因みに、
frameborder="数字" ⇒動画の周りに枠線をつけたい場合に1以上の数値を入れます。

 

可愛いですね、タテゴトアザラシの赤ちゃん(*´ω`)

 

尚、プラグインを使った方法はこちらで解説しています。

 

YouTube動画をコピペだけでスマホ対応(レスポンシブ)投稿する方法

以上が、ブログにYouTubeの動画を簡単に表示させる方法となります。

ブログをビジネス活用し、集客・販売したい方へ

集客ブログでこれだけは押さえるべき3つのポイントをメルマガご登録でプレゼント!

集客用にブログを立ち上げて更新しているのになぜか全くお問い合わせが来ない…。」

「これから集客用のブログをWordPressで立ち上げたいけど、どうしたら良いのかがわからない…。」

とお悩みのあなたに!

2013年からブログを始め、8年以上集客し続けているい”ますぐ押さえるべき3つのポイント”まとめたPDFをプレゼント!

受け取り方は、簡単!

今すぐこの下にあるフォームに必要事項をご入力の上、「送信」ボタンをクリックもしくはタップしてください。

送信後すぐに、あなたのメールアドレス宛にダウンロードURLをお送りします!

※マニュアルのダウンロードにはメルマガのご登録が必要ですが、ご購読も無料でいつでも解除可能ですのでご安心ください。

無料メルマガ登録はこちら!

氏名 必須です
メールアドレス 必須です
確認用メールアドレス 必須です

 注意点
DoCoMo、au、softbankのキャリアメール及びiCloudのメールアドレスは届かない可能性が非常に高い為、必ずGmailやプロバイダーが提供するPCで受信可能なメールアドレスをご入力ください。

プライバシーポリシーについて