現在の接続環境は
です

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

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

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

YouTube

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

所要時間目安:3

This session is using  IPv4  is established in

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

目次に行く・戻る

2025年4月1日 (火曜日)↓における週間月間人気記事トップ3は?↓

  • 本日
  • 週間
  • 月間
  1. エクストレイルT32運転席側バイザーメッキモール剥がれ修復方法とオススメ両面テープ 4PV

    車の購入後、乗ろうが乗らまいが経年劣化というものは付きものなのですが、特にプラスチック部分や両面テープ部分などは経年劣化がどうしても起きてきてしまいます。 そんな車でも長めにお気に入りの愛車となれば長…

    もっと読む

  2. アイドリングストップシステム異常警告灯表示対処方法 4PV

    2010年前後以降の車に搭載されていることの多いアイドリングストップシステム。各自動車メーカーによって呼び名は異なりますが、機能としては信号待ちが長い時や停止時間が長い時などに勝手に(自動的に)アイド…

    もっと読む

  3. 純正シートベルトバックル

    シートベルトがきついのでシートベルト延長(バックル延長) 4PV

    すべての車に付いているシートベルト…。 ですが、体型や車種によってシートベルトのバックルが短いとシートベルトを締めた際にきつくて運転自体がしにくくなってしまいます。 それでは、せっかくの安全装置である…

    もっと読む

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

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

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

    もっと読む

  2. エクストレイルT32運転席側バイザーメッキモール剥がれ修復方法とオススメ両面テープ 24PV

    車の購入後、乗ろうが乗らまいが経年劣化というものは付きものなのですが、特にプラスチック部分や両面テープ部分などは経年劣化がどうしても起きてきてしまいます。 そんな車でも長めにお気に入りの愛車となれば長…

    もっと読む

  3. アイドリングストップシステム異常警告灯表示対処方法 23PV

    2010年前後以降の車に搭載されていることの多いアイドリングストップシステム。各自動車メーカーによって呼び名は異なりますが、機能としては信号待ちが長い時や停止時間が長い時などに勝手に(自動的に)アイド…

    もっと読む

  1. エクストレイルT32運転席側バイザーメッキモール剥がれ修復方法とオススメ両面テープ 4PV

    車の購入後、乗ろうが乗らまいが経年劣化というものは付きものなのですが、特にプラスチック部分や両面テープ部分などは経年劣化がどうしても起きてきてしまいます。 そんな車でも長めにお気に入りの愛車となれば長…

    もっと読む

  2. アイドリングストップシステム異常警告灯表示対処方法 4PV

    2010年前後以降の車に搭載されていることの多いアイドリングストップシステム。各自動車メーカーによって呼び名は異なりますが、機能としては信号待ちが長い時や停止時間が長い時などに勝手に(自動的に)アイド…

    もっと読む

  3. 純正シートベルトバックル

    シートベルトがきついのでシートベルト延長(バックル延長) 4PV

    すべての車に付いているシートベルト…。 ですが、体型や車種によってシートベルトのバックルが短いとシートベルトを締めた際にきつくて運転自体がしにくくなってしまいます。 それでは、せっかくの安全装置である…

    もっと読む

今日は2025年4月1日です。

メルカリ招待コード:

すごいっ!!
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クイックタグ追加

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

 

の前に以下のスタイルシート(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」とか表示されてるのってかっこいい!!

Windows10サポート終了まで
196日 12時間 55分 52秒

【AmazonスマイルSALE】!


3/28(金)9時から4月1日(火)23時59分まで、「AmazonスマイルSALE」開催予定

3月28日(金曜日) ~ 2025年4月1日(火曜日) 23:59まで

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

メンテナンス 伝えたいこと

トヨタもホンダも「アイドリングストップ機能」廃止へ

アイドリングストップ機能が、TOYOTAとホンダで廃止され始めました。そもそもアイドリングストップ機能は、信号待ち中などの停止時間にガソリンの消費を少しでも抑えようという発想(考え)から生まれた技術だ…

もっと読む

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

OneTab日本語化公式サイト

PC ブラウザChrome 伝えたいこと 備忘録 設定

Chrome拡張機能おすすめのOneTabが日本語化していた。

言わずと知れた?Chromeの拡張機能である「OneTab」という拡張機能があります。タブブラウザになってからというものついつい後で見ようと思ったサイトを開きっ放しにしてしまいます。その結果、ずら~っ…

もっと読む

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

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

広告の削除や非表示について

広告というとなにかイメージが悪い感じがする方もいるのかと思います。たしかに中にはエセ広告や胡散臭い広告などもたぶんあります。 広告という意味としては、企業などが世の中、社会に新しい商品やサービスなどを…

もっと読む

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

バイラルメディア風SNSボタン

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

Stinger6、Stinger7でバイラルメディア風ボタン設置方法

ここのところ、よくブログサイトや大手企業のニュースサイトなどの記事の下に、 上記の画像のようなバイラルメディア風のSNSボタンが設置されているのをよく見かけると思います。 これまでは、とくに気にしなか…

もっと読む

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

仮歯が外れてしまった

伝えたいこと 備忘録 噛みあわせ 治療

仮歯が取れた!!そんな時どうしたら良いのか2つの方法

多くの方々はこれまでの人生において歯医者さんに行ったことがない人というのはほとんどいないと思います。 なぜなら、小学生の時などには必ず歯科検診もあるからです。この歯科検診を含めれば、 すべての人が歯科…

もっと読む

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

SMAP解散

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

SMAP解散撤回してくれないかな…。SMAPロスは中居君がなくしてくれるかな…。

言わずとも知られている国民的アイドルのSMAPが今年2016年12月31日で、解散してしまう…。1世代でもなく2世代、中には3世代にも渡ってファンです。 という方々も多いのではないでしょうか?ファンで…

もっと読む

あなたが訪問してから

0 秒経過 🎉
821日 11時間 4分 5秒

WordPress, カスタマイズ, カスタマイズ, 伝えたいこと, 備忘録」の人気記事

入学入社まであと…入学入社祝いはどんなPresent(プレゼント)でどのように過ごされますか?

ホワイトデープレゼントは以下などの豊富なキャンペーン商品から選ぶと良いと思います。

おすすめ!!

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

おすすめ2

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

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

9483日 11時間 4分 5秒

カウントダウンタイマー

おすすめの記事一部広告

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

Multiplex 広告

Total791


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

目次に戻る

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

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

目次に戻る

目次に戻る


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

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

    • danna より:

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

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

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

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

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

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

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

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

      • danna より:

        ロイド様。
        すみません。

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

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

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

        <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を変えて貼ってみましたが、変わらず。

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

    なんとも、謎です。

    • danna より:

      ロイド様、
      以下の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動画を変えて、
        ブログを軽くすることができました。

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

        • danna より:

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

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

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

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

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

comment

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


This site uses Akismet to reduce spam. Learn how your comment data is processed.

S