Loading…

WordPress カスタマイズ カスタマイズ 伝えたいこと 備忘録

YouTube動画が遅い。重い時、掲載しても遅くならない方法

本日の人気記事BEST10

所要時間目安:3


WordPress カスタマイズ カスタマイズ 伝えたいこと 備忘録

YouTube

すごいっ!!
YouTubeの動画をブログに貼り付けても重くならない・遅くならない方法があったなんて…。

WordPressでも応用可能かと思って試してみました。
たぶん、多くのテーマでも可能なのではないでしょうか!!(私の現在の使用させて頂いているWordPressのテーマはENJIさん作のStinger6です。)テスト用の未公開のStinger7でも大丈夫でした。

Google日本語入力の辞書に登録してその都度貼り付けでもいいのかなぁなんて思ったりもしましたが、WordPressのクイックタグに登録しても良いんじゃないのかなぁなんて思ったりもして…。

大元サイト)

私のブログでは音楽を扱った記事が多いので、大量にYouTubeを埋め込むことが多々あります。しかし、あまりにたくさんのYouTube動画を埋め込むと、ページの読み込みに時間がかかってしまいます。

 

スポンサーリンク

アドセンス336pxPC閲覧記事下表示1つ目コード

 

とりあえず、クイックタグに登録してみました。

よく読まれている人気記事一覧

クイックタグ登録方法

 

QTags.addButton('youtubespeed', 'YouTube動画ID', '<div class="youtube" data-video="https://www.youtube.com/embed/動画ID?autoplay=1"><img src="https://img.youtube.com/vi/動画ID/mqdefault.jpg" alt="" width="320" height="180" />', '</div>');

 

YouTubeクイックタグ追加

クイックタグ追加方法詳細は以下にあります。

早速ですが、 クイックタグ登録してみた。 テキストエディタにした時に、 いくつかボタン表示にてタグが登録されていました。 それを辿ってfunction.p

 

目次に戻る


スポンサーリンク

の前に以下のスタイルシート(CSS)を追加しておきます。

 

/*YouTube遅くならないCSSここから*/
 .youtube {
 display: inline-block;
 position: relative;
 overflow: hidden;
 width: 320px;
 height: 180px;
 }
 .youtube::before {
 position: absolute;
 content: "Click to Play";
 color: #fff;
 text-align: center;
 font-size: 22px;
 font-weight: bold;
 line-height: 180px;
 background: rgba(0, 0, 0, 0.6);
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 z-index: 10;
 transition: all 0.3s;
 }
 .youtube:hover::before {
 background: rgba(0, 0, 0, 0.7);
 cursor: pointer;
 transition: all 0.3s;
 }
 /*YouTube遅くならないcssここまで*/

 

なお、CSSに登録しなくてもテキストエディタにて「ブログ記事の公開」をすれば、上記CSSの上下に

<style>

 </style>

と付ければその記事のみに反映されます。(反映させることができます。)

 

あっ、それと記事の最後部分に以下のコードを記述します。

<script>// <![CDATA[
 $('.youtube').click(function(){
 video = '<iframe src="'+ $(this).attr('data-video') +'" frameborder="0" width="480" height="270"></iframe>';
 $(this).replaceWith(video);
 });
 // ]]></script>

 

上記の本家サイト(NO TITLE)さんでは、

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.3.min.js"></script>

ですが、私の環境では1.11.3が既に使用しているのでそのまま実装できるか試してみたところ、jquery1.11.3でも実装できているようです。
なので、上記コードは削除しています。

そんなにYouTubeの動画を記事に貼り付けたりしない場合や貼り付けたりしない方は記事ごとで良いのかもしれませんね。

 

その他、画像のサイズや動画IDなどの取得が面倒なので効率化された「ようつべタグぽん」というサイトを作成されていらっしゃいます。

「なんとかして手順を減らしたい!」と思いまして、「動画URLを貼るだけで、完成コードが出てくるツール」を作成しました。

 

通常通りにYouTube動画を貼り付けた場合は以下です。

 

https://youtu.be/aE7lQ2BT0gU

そして、
下が今回の方法にて貼り付けた場合!!

 

スポンサーリンク

上記クイックタグとCSS、スクリプト等を使用して貼り付けた場合は以下になります。

 

 

なんとなくカッコいくてしかも、「Click to Play」とか表示されてるのってかっこいい!!


アドセンス336pxPC閲覧記事下表示1つ目コード

おすすめの記事一部広告

    Multiplex 広告

WordPress, カスタマイズ, カスタマイズ, 伝えたいこと, 備忘録」同じカテゴリーの記事一覧


関連記事

GoogleFont

Stinger6 WordPress

webフォントの使い方GoogleFontは遅い所か早い

  ブログやホームページを運営していくにあたり時折他のPCで自分のブログやホームページを表示した所、 自分のPCでの文字表示(フォント)が異なってしまいデザイン自体が崩れたりしました。 しか…

もっと読む

マクロミルスキマ時間

インターネット スマホ 伝えたいこと 備忘録

空いてる時間を有効活用し、スキマ時間にお金を稼ぐそんな1つの方法

(アイキャッチ画像はマクロミルサイトのスクリーンショットです。) 私が13年前にとあるメーカーを退社したのと同時くらいに多くの正社員の募集人員があったマクロミルという会社があります。 現在では、インタ…

もっと読む

大統領令発令ウェブサイト

インターネット 伝えたいこと 備忘録 時事ネタ

トランプ大統領が大統領令を発令出来る!?アメリカンジョークなWebサービスIs Now Illegal

アメリカのトランプ大統領が就任して間もなく、移民政策やメキシコとの国境に壁を作るなどの大統領令を発令しました。 前大統領の元オバマ大統領も就任直後に大統領令にサインをしたのを覚えています。 そこで、ア…

もっと読む

小保方晴子さん画像

セキュリティ 伝えたいこと 備忘録

小保方晴子という宛名の迷惑メール

2014年4月9日、会見を行う小保方晴子氏(撮影=吉田尚弘) 先日から何度かウイルス付き迷惑メールを紹介してきましたが、 今回はSTAP細胞で有名になった小保方晴子さんの名前の宛名にての迷惑メールだっ…

もっと読む

目次に戻る

よろしかったらシェアよろしくお願いします。

-WordPress, カスタマイズ, カスタマイズ, 伝えたいこと, 備忘録



この記事が良かったら
いいね!お願いします(#^.^#)

WordPressデビュー津々浦々の
最新情報をお届けします

言えないことはTwitterで!!



目次に戻る

目次に戻る


コメントを閉じる
  1. ロイド より:

    「youtube ブログ 重い」で、izuさんのブログに訪れ、
    こちらの記事を読ませて頂きました。

    youtubeを貼ったブログ記事が重く、
    対処したいのですが、
    いろいろな記事を見ても、上手くいきません。
    izuさんのやり方も試したのですが上手く行かず。

    1,
    /*YouTube遅くならないCSSここから*/
    .youtube {
    display: inline-block;
    position: relative;
    overflow: hidden;
    width: 320px;
    height: 180px;
    }
    .youtube::before {
    position: absolute;
    content: "Click to Play";
    color: #fff;
    text-align: center;
    font-size: 22px;
    font-weight: bold;
    line-height: 180px;
    background: rgba(0, 0, 0, 0.6);
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    transition: all 0.3s;
    }
    .youtube:hover::before {
    background: rgba(0, 0, 0, 0.7);
    cursor: pointer;
    transition: all 0.3s;
    }
    /*YouTube遅くならないcssここまで*/

    これをcssの最後にコピペ。

    2.

    これの動画IDの部分を
    使いたい動画IDに変えて、記事に貼り投稿。
    (タグにしないため、前後を削除)

    何かやり方が間違っていますでしょうか?
    当方、cssの知識も数値を変えたりするぐらいで、
    コピペの場所が違うのかもしれません。

    できましたら、やり方の指摘をしてもらえたら幸いです。
    よろしくお願い致します。

    • izu より:

      ロイド様。
      コメントありがとうございます。

      CSSはロイド様のお使いのブログのCSS記述部分に使用することで問題はないと思われます。

      動画IDの問題ではないかと推測されるのですが、
      動画IDはどのように記載されているいらっしゃいますか?

      例えば、動画のURLがhttp://www.youtube.com/watch?v=◯◯◯◯◯というURLだと仮定します。

      そうした場合には、
      以下のようにブログ投稿記事ないに記載します。

      以上の用に動画IDを記載して投稿記事に反映してみてどうでしょうか?

      また、
      ご使用していらっしゃるブログ作成ツールはWordPressでしょうか?

      ※使用しているブログ作成ツールやサービスによって、
      記載する場所などが異なります。

      • izu より:

        ロイド様。
        すみません。

        コードをそのまま記載してしまったらそのまま反映されてしまっていました。

        カッコ部分を半角英数ではなく全角にて再度記載しておきますので参考にしてみてください。

        以下のようにブログ投稿記事内に記載します。

        <div class="youtube" data-video="http://www.youtube.com/embed/◯◯◯◯◯?autoplay=1"><img src="http://img.youtube.com/vi/◯◯◯◯◯/default.jpg" alt="" width="120" height="90"></div>

        以上の用に動画IDを記載して投稿記事に反映してみてどうでしょうか?

  2. ロイド より:

    返信ありがとうございます。

    >ご使用していらっしゃるブログ作成ツールはWordPressでしょうか?
    はい、WordPressを使っています。

    の”を半角にして、〇〇の部分を動画IDにして、
    テキストエディタに貼り付けました。

    Click to Playと出ますが、
    それ自体をクリックしても、動画が始まりません。

    上記クイックタグとCSS、スクリプト等を使用して貼り付けた場合は以下になります。
    の下の動画のソースを見ると、

    とあり、

    の部分が必要なのかな?と思い、
    動画IDを変えて貼ってみましたが、変わらず。

    違うテンプレートやサイトでも試しましたが、
    テンプレートやサイト、プラグインが原因でもなさそうです。

    なんとも、謎です。

    • izu より:

      ロイド様、
      以下のjQueryはヘッダーにて読み込ませていますでしょうか?

      <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.3.min.js"></script>

      それと、
      記事中か面倒であればすべての記事に反映させるように、single.phpの記事本分が出力されるコードより下に以下のコードは記載されていらっしゃいますでしょうか?

      <script>// <![CDATA[
      $('.youtube').click(function(){
      video = '<iframe src="'+ $(this).attr('data-video') +'" frameborder="0" width="480" height="270"></iframe>';
      $(this).replaceWith(video);
      });
      // ]]></script>

      注意)上記カッコはすべて半角ではなく全角にて記載しました。(コメントないでスクリプトが実行されないように)
      なので、カッコは半角にしてください。

      また、
      >の”を半角にして、〇〇の部分を動画IDにして、
      テキストエディタに貼り付けました。

      の”を半角にして・・・・・

      というのがどこを指していらっしゃるのかわかりません。m(__)m

      追伸)
      クイックタグは、
      私がYouTubeを貼り付ける際に記事作成の際に、面倒でないよにクイックタグ化しただけですので、
      クイックタグは登録しなくても上記コメントhttps://infovarious.com/post-2202/#comment-3919に記載してある<div>~</div>内を記事の投稿時に、
      ビジュアルではなくテキストにて、貼り付けてみてください。

      クイックタグ登録は私自身の備忘録として、記載しただけですのでm(__)m。

      • ロイド より:

        返信ありがとうございます。

        >の”を半角にして、〇〇の部分を動画IDにして、
        テキストエディタに貼り付けました。

        の”を半角にして・・・・・
        というのがどこを指していらっしゃるのかわかりません。m(__)m

        これは、~を書いたのですが、
        スクリプト実行されて見えなくなったみたいです。

        // <![CDATA[
        $(‘.youtube’).click(function(){
        video = ‘’;
        $(this).replaceWith(video);
        });
        // ]]>

        これを貼っていませんでした。
        完全に抜けてますね・・・。

        無事、youtube動画を変えて、
        ブログを軽くすることができました。

        izuさん、
        何度も返信して頂き、ありがとうございましたっ。

        • izu より:

          ロイド様。
          無事解決されたようで良かったですね(*^^*)!

          こちらこそ、記事がわかりにくくて申し訳ありませんでした。

          良かったら、ロイド様のブログにて当記事を紹介して頂けましたら嬉しいです。(≧∇≦)b

          (あっ(o・。・o)あっ!、でも下系などのサイトでしたら紹介はしないでくださいネ)
          Ned(゚∀゚*)ネッ!

          何はともあれ解決されて良かったです!!ヾ(=^▽^=)ノ

comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください