現在の接続環境は
です

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

Windows10サポート終了まで

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

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

YouTube

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

所要時間目安：約3分

This session is using　 IPv4 　is established in

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

カーメンテナンスWAKO'S

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

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

目次に行く･戻る

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

  • 本日
  • 週間
  • 月間
  1. エクストレイルフォグランプの光軸調整後

    エクストレイルフォグランプが下を向きすぎている光軸調整方法 39PV

    人気車種のSUVで日産エクストレイルT32型のフォグランプは、光軸が下を向きすぎているためせっかくLEDフォグランプにしたりHIDにしたりしてもその恩恵をあまりかんじられません。要は、ボンネットが少し…

    もっと読む

  2. Windows10で動かないアプリを動かす方法2 16PV

    先日も書きましたWindows10の不具合？に関することです。 不具合と言うのか仕様と言えば良いのかわかりませんが、とにかくWindows10にアップグレードしたりWindows10に若干古めのアプリ…

    もっと読む

  3. エクストレイルステアリング内のスパイラルケーブル接続部コネクタ

    ステアリング交換とステアリングスイッチの増設と外し方後期型仕様に 9PV

    NISSANエクストレイルは日産の中でも人気のSUV車です。そのエクストレイルは今年の6月8日にT32型の後期型がマイナーチェンジして発売されました。新しい後期型にはメーカーオプションで話題の半分自動…

    もっと読む

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

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

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

    もっと読む

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

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

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

    もっと読む

  3. TRDステアリングTOYOTA純正品

    ハンドルのセンターがズレている時の直し方タイロッドエンド調整による方法 81PV

    ここ最近のハイブリッド車や電気自動車においては、ハンドル（ステアリング）を交換することなどは滅多にないかもしれません。 ですが、個体差というものがあって新車だとしてもハンドルの真ん中の位置がズレてしま…

    もっと読む

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

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

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

    もっと読む

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

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

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

    もっと読む

  3. TRDステアリングTOYOTA純正品

    ハンドルのセンターがズレている時の直し方タイロッドエンド調整による方法 81PV

    ここ最近のハイブリッド車や電気自動車においては、ハンドル（ステアリング）を交換することなどは滅多にないかもしれません。 ですが、個体差というものがあって新車だとしてもハンドルの真ん中の位置がズレてしま…

    もっと読む

メルカリ招待コード：

すごいっ！！
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

カウントダウンタイマー

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

記事上に人気記事表示

Stinger6 Stinger7 WordPress カスタマイズ 備忘録

WordPressプラグインなしでコンタクトフォームを作成方法

  当ブログにも、ページの欄・所にコンタクトフォームを設けていて、 emailでメール送信されるようにしています。 コンタクトフォームは、 俗に言う「お問い合わせ先」です。 今はSNSで匿名…

もっと読む

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

Stinger7デモサイトスクショ

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

Stinger6のフッターに3カラムのウィジェットを追加する方法

WordPressのテーマには多くのものがあります。 中でも無料のテーマでStingerがとても有名です。 かつ、 SEO的にも優れています。 また、 カスタマイズ性にも良いです。 そこで、 Stin…

もっと読む

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

清原和博さん

伝えたいこと 備忘録

清原さん保釈について…。ちょっと心配な事を考えてみたり…。

（桑田さん、すみません。写真貼らせて頂きましたm(__)m。） 先日、庶民である私一般人が清原さんについて記事にさせて頂きました。m(__)m。そんな中、私一般人なりにちょっとだけ心配な面を…

もっと読む

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

アプリーチCSS最終型

Android iPhone PC スマホ ツール 伝えたいこと 備忘録

アプリーチCSSデザインでiTunesアフィリエイトプログラム(PHG)を使い方法

もうアフィリエイトをしている人には知れ渡っているかもしれませんが、アプリーチというままはっくさんの旦那さんが作ったツール？サイトがあります。 同じような便利なツールとしてカエレバブックマークレットなど…

もっと読む

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

新しいアフィリエイト

メンテナンス 伝えたいこと 備忘録 時事ネタ 車

新しい事を初める準備や片付けって意外と面倒で時間がかかる…。

なんでもそうですが、新たに新しいことを始める時に（家の配置替えや片付けや家電の買い替えやいろいろ）これまであったものを整理整頓して、新しいものを迎え入れたいと思います。 そんなこんなでこれまでにあった…

もっと読む

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

invoice迷惑メール

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

Invoice#という迷惑メールはVVVウイルスと同じランサムウェア

 昨年に流行ったVVVウイルスというウイルスがありました。これは、PC内のファイルをすべて拡張子を.vvvという拡張子に変更してしまい、PC自体を起動不能にしてしまったりするランサムウェアで…

もっと読む

あなたが訪問してから

⏰ 0 秒経過 🎉

あなたが訪問してから

0 秒

おすすめの記事一部広告


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

Multiplex 広告

Total542


アドセンス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