ここでは、YouTube動画をレスポンシブ化してブログ(サイト)に埋め込む方法を紹介する。

 

YouTube動画のレスポンシブ化とは

 

まず、ブログやサイトなどに貼ったYouTube動画をレスポンシブ化するには、ブログ(サイト)に「CSSコード」を追加する必要がある。

 

その後、YouTube動画の埋め込みコードを取得し、コードを修正してブログ(サイト)にコードを貼れば動画がレスポンシブ化されるのだ。

 

CSSコードの追加

 

では、さっそく「CSSコード」を追加する。

 

 

カエテンWP-JOYのテンプレートの方は、Wordpressのダッシュボード(管理画面)から、「外観」、「その他オプション」に進む。

 

 

すると、カスタマイズ用CSSの欄が表示されるので、この欄に下記のCSSコードを、追加する。

参考➡WordPressや通常サイトでYoutubeやVimeoの動画の埋め込みをCSSで簡単にレスポンシブWeb対応にさせる方法

 

めがね

CSSコードについては、上記のサイトを参考にして作成させてもらっています。

 

 

で、コピーしたCSSコードを、カスタマイズ用CSSに追加する(コードを追加する際には、一行スペースをあけて追加した)。

 

これで、CSSコードの追加は完了である。

 

YouTube動画の埋め込みコードの修正

 

次は、YouTube動画の埋め込みコードの修正を行うので、まずは、YouTubeに移動してブログ(サイト)などに貼る動画のコードを取得しよう。

 

 

YouTubeに移動したら、動画を選択し「共有」をクリックする。

 

 

「埋め込む」をクリックする。

 

 

「コピー」をクリックする。

 

 

で、コピーしたコードをTeraPadなどに貼り付ける。

(直接、記事ページのテキスト画面に貼り付けても問題はない)

 

貼り付けた後は、赤枠の部分を削除する。

 

 

削除後は、このようになる。

そして、上記のコード(divタグ)で「動画のコード」を囲む。

上記のようになれば、OKである。

これで、YouTube動画の埋め込みコードの修正は完了である。

あとは、Wordpressの記事ページに移動して、好きな場所にコードを挿入すれば良い。

 

 

コードを挿入するときには、テキスト画面にて行う。

 

 

コードの挿入が上手くいくと、このようにして、YouTube動画が画面幅いっぱいに広がっていると思う。

もちろんスマホ、タブレットでも、同様だ。

 

以上で、YouTube動画をレスポンシブ化してブログ(サイト)に埋め込む方法についての解説は終了する。

 

初心者が動画を編集ソフトで加工して、YouTubeにアップロードする方法

初心者が動画を編集ソフトで加工して、YouTubeにアップロードする方法

世間には、YouTuber(ユーチューバー)と呼ばれる「YouTube動画」でお金を稼ぐ人達がいるが、最近サイト(ブログ)の作成を始めた方で、動画もアップしたい...

投稿 2018/05/29