注目の記事 PICK UP!

WordPressの投稿にyoutubeを埋め込む方法

「WordPressの投稿にyoutubeを埋め込むことはできますか?」

こんにちは、創人制作部です。

この記事ではWordPressのお知らせやブログなど投稿画面でyoutubeを【プラグインなし】で高速化して掲載する方法を紹介していきます。

【もくじ】
投稿画面の頭に専用コードを張り付ける
youtubeの埋め込みコードを探す
埋め込みコード少し改造する

投稿画面の頭に専用コードを張り付ける

まずは、投稿記事の本文を書く一番上に以下のコードをそのままコピーして張り付けます。

<script>
function init() {
var vidDefer = document.getElementsByTagName('iframe');
for (var i=0; i<vidDefer.length; i++) {
if(vidDefer[i].getAttribute('data-src')) {
vidDefer[i].setAttribute('src',vidDefer[i].getAttribute('data-src'));
} } }
window.onload = init;
</script>

これは、ページの読み込むときにyoutubeが邪魔しないようにするコードになります。

詳しいことはわからなくても、問題ありません。

コードがある場合とない場合で比べてみると体感できるかと思います。

 

youtubeの埋め込みコードを探す

埋め込みたい動画のページにアクセスして、右下に「共有」のボタンを押します。

すると、小窓が出てきますので、「埋め込み」を押します。

小窓の右側に専用コードが出てきますのでコピーします。

コピーしたコードを投稿画面に張り付けてください。

※youtube動画の埋め込みについては、公式ヘルプの著作権侵害に関するページを必ず確認してから行ってください。

埋め込みコード少し改造する

先ほど張り付けてもらったコードの一部を改造します。

src="//www.youtube.com/embed/yd8jh9QYfEs"

↓↓↓↓↓

src="" data-src="//www.youtube.com/embed/yd8jh9QYfEs"

※youtubeのURLはそれぞれ違うと思いますので注意してください。

はい、これで終わりです。一度ページを確認してみてください。

どうでしたか?youtube動画を投稿していくなら知っておくといいかなと思います。
小さいことかもしれませんが、コツコツしていくのがすごく大事です。

  • コメント: 0

関連記事

  1. WordPressの記事投稿で使えるプラグインBEST3

  2. WordPressが選ばれる3つの理由

  3. WordPressの投稿にツイートを埋め込む方法

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

CAPTCHA


最近の記事

  1. サイト分析に必須!!アナリティクスの見方
PAGE TOP