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動画を貼り付けた場合は以下です。

 

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

 

スポンサーリンク

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

 

 

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

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


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

おすすめの記事一部広告

関連記事

Windows10 update Assistant is already running

PC Windows10 伝えたいこと 備忘録

Windows10サポート期間一覧表

Windows10がリリースされて早いものでもう2年と7ヶ月経ちます。そんなWindowsの最新バー…

もっと読む

https

インターネット セキュリティ 伝えたいこと 備忘録

SSL化とかHTTPS化とか言うけれども、セキュリティは大事だけど個人ブログやサイトにも必要かなぁ…。

ここのところというより昨年末だったか、今年のはじめだったかちょっと記憶が定かではなのですが、Goog…

もっと読む

SearchConsole警告なし

PC ツール 伝えたいこと 備忘録 時事ネタ

サイトマップの警告表示を3秒で解決・対処する方法

昨日SearchConsole(旧ウェブマスターツール)にてサイトマップを確認するとサイトマップを送…

もっと読む

おすすめCANONプリンター複合機

PC 伝えたいこと 設定

おすすめプリンター複合機CANON・EPSONでもなくBROTHERかHP(ヒューレット・パッカード)

現在、多くの家電量販店や価格ドットコムなどで人気機種ランキングや売上数ランキングなどでじょういを占め…

もっと読む

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

おすすめ!!

世界中でNo.1のシャアを誇るAmazonでのお得なお買い物でお得をしよう!!ネット通販なので、もちろん24時間年中無休です。健康商品から食品、車カスタマイズ商品、大手家電メーカー商品やパソコンの自作サプライ商品、その他アマゾン・プライムでは映画やドラマなど多くの作品や番組を見ることができます。マスクなど衛生商品も今では必須アイテム。一番信用できて一番商品数の多いAmazonでの買い物が絶対にオススメ!!

おすすめ2

楽天による季節特集です。それぞれの季節ごとにお得なお買い物商品やお得な旅行商品、その他にもAmazon同様に国内最大の買い物ポータルサイトです。楽天をメインにお買い物されている方はポイントやSPUも貯まりさらにお得に!!楽天カードや宇佐美系列のガソリンスタンドでも楽天ポイントが今では貯まります。それらのポイントを貯めてお得にお買い物や旅行商品その他にもパソコンサプライや車カスタマイズ商品など楽天も充実しています。

-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 を使っています。コメントデータの処理方法の詳細はこちらをご覧ください