今回は、【YouTube動画をブログにレスポンシブに埋め込む方法】について解説します。
プラグインを使ってレスポンシブにする方法もありますが
文頭に動画を組み込んだ場合、ショートコードが表示されてしまう事があります。
これだと、カッコ悪いので、ちょっとカスタムしてレスポンシブ化する方法について解説します。
CSSに1行追加してYouTubeをレスポンシブ化しよう！
【ダッシュボード】⇒【外観】⇒【テーマの編集】から、【style.css】を開きます。
そして、そのCSSデータの最後に以下の1行を追記させて下さい。
iframe{ width:100%; }
追記できたら、保存をして完了です。
次は、YouTube動画を、埋め込み処理すればOKです！
YouTube動画をブログ内に埋め込み表示させる方法
まずは、表示させたい動画のページを開きます。
そして、下記画像にもある共有ボタンをクリックします。
すると、様々なブログのアイコンが出てきますが、
そこではなく、埋め込みコードという項目をクリックします。
サイズの変更も可能です。
サイズを変更したい場合は、先にサイズ指定してからボックス内のコードをコピーしてください。
表示される埋め込みコードを後は投稿ページの
テキストモードにしてコピペすればOKです。
完成するとこうなります。
こんな感じです↓
尚、埋め込みコードが表示されるボックスの下の動画のサイズで好みのものがない場合
埋め込みコードの下記数値を変更すると、サイズを調整できます。
width="数字" ⇒動画の横幅
height="数字" ⇒動画の縦幅
因みに、
frameborder="数字" ⇒動画の周りに枠線をつけたい場合に1以上の数値を入れます。
可愛いですね、タテゴトアザラシの赤ちゃん(*´ω｀)
尚、プラグインを使った方法はこちらで解説しています。
⇒YouTube動画をコピペだけでスマホ対応(レスポンシブ)投稿する方法
以上が、ブログにYouTubeの動画を簡単に表示させる方法となります。
