現在の接続環境は
です

記事内にプロモーションが含まれています。

Windows10サポート終了まで

プロモーションを含みます

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

YouTube

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

所要時間目安：約3分

This session is using　 IPv4 　is established in

この記事は2016年5月25日のものです。現在は状況が異なる可能性がありますのでご注意ください。

カーメンテナンスWAKO'S

2024年11月23日 (土曜日)本日の人気記事トップ１０

今日は2024年11月23日です。

目次に行く･戻る

2024年11月23日 (土曜日)↓における週間月間人気記事トップ３は？↓

  • 本日
  • 週間
  • 月間
  1. エクストレイルドアミラー自動格納装置取り付け時

    エクストレイル自動ドアミラー格納装置取り付けと有効化無効化方法 301PV

    またまた、車ネタです(*゜.゜)ゞポリポリ。エクストレイルはディーラーオプションにて、サイドミラーのロック・アンロック時にサイドミラーの自動ドアミラー格納装置があります。このオプションもしくは、セーフ…

    もっと読む

  2. エンジンスターターリモコン

    カーメイトのエンジンスターターでエラー15表示と対処方法 100PV

    夏冬に特に重宝するのが、エンジンスターターです。 メーカーはCARMATEやCOMTECユピテルなど各社ありますが、一番のオススメはリモコンから多くの情報を得ることができるカーメイト製品です。 なぜか…

    もっと読む

  3. カーナビテレビが見れなくなったICカードが正常に動作しませんでした

    ナビテレビが見れなくなった時ICカードが正常に動作しませんでした対処方法 77PV

    本日ではなく昨日になってしまいますが、それまでカーナビで地デジ対応のナビで突然エンジンをかけなおしたら・・・・・・。 「ICカードが正常に動作しませんでした。販売店にお問い合わせください。」 なんてい…

    もっと読む

  1. エンジンスターターリモコン

    カーメイトのエンジンスターターでエラー15表示と対処方法 1,058PV

    夏冬に特に重宝するのが、エンジンスターターです。 メーカーはCARMATEやCOMTECユピテルなど各社ありますが、一番のオススメはリモコンから多くの情報を得ることができるカーメイト製品です。 なぜか…

    もっと読む

  2. カーナビテレビが見れなくなったICカードが正常に動作しませんでした

    ナビテレビが見れなくなった時ICカードが正常に動作しませんでした対処方法 634PV

    本日ではなく昨日になってしまいますが、それまでカーナビで地デジ対応のナビで突然エンジンをかけなおしたら・・・・・・。 「ICカードが正常に動作しませんでした。販売店にお問い合わせください。」 なんてい…

    もっと読む

  3. エクストレイルドアミラー自動格納装置取り付け時

    エクストレイル自動ドアミラー格納装置取り付けと有効化無効化方法 334PV

    またまた、車ネタです(*゜.゜)ゞポリポリ。エクストレイルはディーラーオプションにて、サイドミラーのロック・アンロック時にサイドミラーの自動ドアミラー格納装置があります。このオプションもしくは、セーフ…

    もっと読む

  1. エンジンスターターリモコン

    カーメイトのエンジンスターターでエラー15表示と対処方法 1,058PV

    夏冬に特に重宝するのが、エンジンスターターです。 メーカーはCARMATEやCOMTECユピテルなど各社ありますが、一番のオススメはリモコンから多くの情報を得ることができるカーメイト製品です。 なぜか…

    もっと読む

  2. カーナビテレビが見れなくなったICカードが正常に動作しませんでした

    ナビテレビが見れなくなった時ICカードが正常に動作しませんでした対処方法 634PV

    本日ではなく昨日になってしまいますが、それまでカーナビで地デジ対応のナビで突然エンジンをかけなおしたら・・・・・・。 「ICカードが正常に動作しませんでした。販売店にお問い合わせください。」 なんてい…

    もっと読む

  3. エクストレイルドアミラー自動格納装置取り付け時

    エクストレイル自動ドアミラー格納装置取り付けと有効化無効化方法 334PV

    またまた、車ネタです(*゜.゜)ゞポリポリ。エクストレイルはディーラーオプションにて、サイドミラーのロック・アンロック時にサイドミラーの自動ドアミラー格納装置があります。このオプションもしくは、セーフ…

    もっと読む

メルカリ招待コード：

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

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

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

大元サイト）

YouTubeを埋め込んでも重くならないようにする方法がめっちゃ良かった
私のブログでは音楽を扱った記事が多いので、大量にYouTubeを埋め込むことが多々あります。しかし、あまりにたくさんのYouTube動画を埋め込むと、ページの読み込みに時間がかかってしまいます。
NO TITLE

 

アドセンス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クイックタグ追加

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

 

の前に以下のスタイルシート（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などの取得が面倒なので効率化された「ようつべタグぽん」というサイトを作成されていらっしゃいます。

YouTubeを埋め込んでも重くならないようにする方法の『コードを自動生成するツール』を作ったよ
「なんとかして手順を減らしたい！」と思いまして、「動画URLを貼るだけで、完成コードが出てくるツール」を作成しました。
UNDERGROUND FLAVOR

 

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

 

https://youtu.be/aE7lQ2BT0gU

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

 

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

 

 

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

クリスマスまであと…プレゼントは用意されましたか？

🎉 Counting Up! 🎉
Loading...

おすすめ！！

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

詳細ページへ

No.1シェアAmazon

おすすめ2

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

詳細ページへ

楽天市場

ブログサービスが始まってから:

0

カウントダウンタイマー

あなたにおすすめな関連記事

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

たった今使用したパスワードがデータ侵害で検出されました。とChromeで表示

ブラウザのひとつにGoogle製のGoogle Chromeがあります。その他にもMicrosoft製のMicrosoft EdgeやSleipnirやsafariやBLAVEなどいくつもあります。そ…

もっと読む

インフィード広告アドセンス

スマホファースト

スマホ 伝えたいこと 備忘録

アクセス数を増やす方法!!それはスマホ…。

ブログやホームページなどのサイトを運営していると、やはり気になるのがアクセス数だと思いわれます。ここ2年から3年で一般人や普通の人？（表現が曖昧ですが無礼のないように）でも、 はてなブログやWordP…

もっと読む

インフィード広告アドセンス

ツイッター10年日本公式サイトスクショ

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

Twitter10年！！はじめてのツイッター投稿からちょうど10年の日

上記画像は、 日本Twitterの公式サイトのスクショです。 （サイトを訪れると10年を祝って風船があがっていきます。。） 今日2016年3月21日は、Twitterではじめてツイートされた…

もっと読む

インフィード広告アドセンス

WXR-1900DHP2

PC 伝えたいこと 備忘録 無線LANルーター

オススメの無線LANルーターはWXR-1900DHP2評価とレビュー

以前、以下のような記事を書きましたが、それ以来使用してもうすぐ3ヶ月になります。 その間には光回線を200Mbpsから1Gbpsへと変更もしました。 また、コラボひかりが流行っていて電話などが多かった…

もっと読む

インフィード広告アドセンス

WindowsUpdateメジャーアップデート停止フリーソフト

PC Windows10 不具合 伝えたいこと 備忘録

Windows10メジャーアップデートCreatorsUpdate不具合ないか延期する方法暫定版

今日2017年4月11日は、Windows10の3回目のメジャーアップデートの公開日です。 これまでの2回はそれなりに不具合もありましたが、なんとか不具合に対処しながらの運用で通常通りにWindows…

もっと読む

インフィード広告アドセンス

伝えたいこと 備忘録 時事ネタ

広告について広告である程度の景気がわかるような気がする

広告と言えば、その企業や商品などのイメージにとても大事なものです。またサイトに表示される広告もサイトのイメージにある程度の影響があると言えます。 数年前にも、以下の記事を書きましたが、センシティブな広…

もっと読む

あなたが訪問してから

⏰ 0 秒経過 🎉

あなたが訪問してから

0 秒

おすすめの記事一部広告


お小遣い稼ぎにアンケート。

Multiplex 広告

Total544


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

目次に戻る

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

この記事タイトルとURLをコピー

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

目次に戻る

目次に戻る

コメントを閉じる
  1. ロイド より:
    2017年1月20日 2:54 AM

    「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の知識も数値を変えたりするぐらいで、
    コピペの場所が違うのかもしれません。

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

    返信
    • danna より:
      2017年1月20日 5:04 AM

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

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

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

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

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

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

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

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

      返信
      • danna より:
        2017年1月20日 5:07 AM

        ロイド様。
        すみません。

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

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

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

        ＜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. ロイド より:
    2017年1月20日 3:06 PM

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

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

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

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

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

    とあり、

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

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

    なんとも、謎です。

    返信
    • danna より:
      2017年1月20日 3:42 PM

      ロイド様、
      以下の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。

      返信
      • ロイド より:
        2017年1月20日 11:22 PM

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

        >の”を半角にして、〇〇の部分を動画IDにして、
        テキストエディタに貼り付けました。
        ↑
        の”を半角にして・・・・・
        というのがどこを指していらっしゃるのかわかりません。m(__)m

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

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

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

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

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

        返信
        • danna より:
          2017年1月21日 12:16 AM

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

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

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

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

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

          返信

comment

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


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

あと5秒で記事が閲覧できます。

Protected by AFFINGER