creatersnest7

【WordPress】プラグインを使ってYoutube動画をサイトに埋め込む方法


こんにちは!
今回は、プラグインを使ってYoutube動画をサイトに埋め込む方法をご紹介します。
手軽にYouTubeの動画を挿入できるようなプラグインを、
いくつかピックアップしました。
各々プラグインを説明します。

 

「Smart Youtube PRO」の設定・使い方

プラグインである「Smart Youtube PRO」の設定、使い方を説明します。
1 ) 設定

下記のURLにてダウンロードするか、
https://wordpress.org/plugins/smart-youtube/

メニューの中から「プラグイン」→「新規追加」→「Smart Youtube PRO」にてインストールして下さい。
管理画面→「Smart Youtube」→settingの設定画面にてサイズ・デザイン・配置等を設定します。

 

2) 使い方

YOUTUBEの対象動画の表示し、
「共有」→「この動画を共有」のところで表示されているURLをコピーして、
記事内に貼りつけます。

 

smart02

若干修正が必要で、貼り付けたURLhttp:// の所に、以下の赤文字部分を追加入力します。

 

———————————————————————————-
↓通常モードで貼り付ける場合はvと入れます。
httpv://youtu.be/******
↓High/HD Qualityモードで貼り付ける場合はvhと入れます。
httpvh://youtu.be/******
———————————————————————————-

 

その後、
管理画面 → 外観 → ウィジェット に追加すると、
「Smart Youtube」のウィジェットが追加されます。

サイドバーにドラッグ&ドロップして追加し、先程と同じ方法でYOUTUBE動画のURLを記載します。

 

smart01

vもしくはvhの修正もお忘れのないようにして下さい。
これで完了です。

 

「Video Thumbnails」の設定・使い方

プラグインである「Video Thumbnails」の設定、使い方を説明します。
1 ) 設定

下記のURLにてダウンロードするか、
https://wordpress.org/plugins/video-thumbnails/

メニューの中から「プラグイン」→「新規追加」→「Video Thumbnails」にてインストールして下さい。
設定の必須項目として、設定画面より下記の画像のように、
サムネイルを自動的に、アイキャッチに設定するようにチェックを確認、もしくはチェックします。

thumbnail01

これで、設定完了です。

 

2) 使い方
投稿フォームにてYouTubeのコードを挿入して、完了です。

thumbnail02
先程チェックしたように、自動的にサムネイル、アイキャッチが取得されます。
これで完了です。

「TubePress」の設定・使い方

こちらのプラグインは、単に記事に挿入できるだけでなく、WordPressで動画ギャラリーページを作れます。

それでは、「TubePress」の設定、使い方を説明します。
1 ) 設定

下記のURLにてダウンロードするか、
https://wordpress.org/plugins/tubepress/

メニューの中から「プラグイン」→「新規追加」→「TubePress」にてインストールして下さい。

設定の必須項目として、
設定画面で【表示させたいYoutubeチャンネル】を設定して、
動画ギャラリーのレイアウトを設定すれば完了です。

tubepress

2) 使い方
投稿フォームにてYouTubeのコードを挿入して、完了です。

 

まとめ

いかがでしょうか。
昨今、益々動画の導入するサイトが増えております。
Yahoo等の大手のニュースサイトでは当たり前に動画を使うような時代になりました。
今回ご紹介させていただきましたプラグインなどを存分に理由して、
動画の強みである視覚に訴える手法を使ってはいかがでしょうか。

 

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


Next Article【WordPressをもっと便利に!】管理画面をカスタマイズできるプラグイン30選