すごいっ！！
YouTubeの動画をブログに貼り付けても重くならない・遅くならない方法があったなんて…。
WordPressでも応用可能かと思って試してみました。
たぶん、多くのテーマでも可能なのではないでしょうか！！（私の現在の使用させて頂いているWordPressのテーマはENJIさん作のStinger6です。）テスト用の未公開のStinger7でも大丈夫でした。
Google日本語入力の辞書に登録してその都度貼り付けでもいいのかなぁなんて思ったりもしましたが、WordPressのクイックタグに登録しても良いんじゃないのかなぁなんて思ったりもして…。
大元サイト）
スポンサーリンク
とりあえず、クイックタグに登録してみました。
人気記事
車のキーナンバー確認方法。キーレス紛失や壊れた時
143,606件の PV
ECUをリセットする方法。アイドリング不安定だったのでしょうがなく
103,216件の PV
Windows10,Windows8.1プロダクトキー確認方法
75,172件の PV
Windows10でエラーコード0x800705b4の対処方法
67,186件の PV
スロットルポジションセンサー調整で不安定なアイドリング調整
39,524件の PV
車から異音の原因。カラカラ、カタカタ、コトコトなど…。
38,023件の PV
ナビテレビが見れなくなった時ICカードが正常に動作しませんでした対処方法
37,950件の PV
Office2010・2013でプラダクトキー紛失して確認・再発行してもった方法
37,185件の PV
ハンドルのセンターがズレている時の直し方タイロッドエンド調整による方法
35,625件の PV
カーメイトのエンジンスターターでエラー15表示と対処方法
30,131件の PV
クイックタグ登録方法
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>');
クイックタグ追加方法詳細は以下にあります。
の前に以下のスタイルシート（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動画を貼り付けた場合は以下です。
https://youtu.be/aE7lQ2BT0gU
そして、
下が今回の方法にて貼り付けた場合！！
上記クイックタグとCSS、スクリプト等を使用して貼り付けた場合は以下になります。
なんとなくカッコいくてしかも、「Click to Play」とか表示されてるのってかっこいい！！
関連記事
-
降圧剤（血圧を下げる薬）で劇症肝炎死亡例…。
多くの方が血圧を下げる薬として飲んだり点滴などで使用する降圧剤。 数年前にはディオバンという降圧剤の不正がありました。 今回の降圧剤は、 この記事を読む方へのオススメカーメ…
-
アクセス数が増加しない。アクセス数を増加させるには…。
当ブログを主としてはじめて概ね1ヶ月半程度が経ちました。 しかし、 以前のブログに比べてアクセス数は1/10以下程度です。 ちょっと寂しいですが、 それが現状では現実・事実…
-
カエレバ・ヨメレバのカスタマイズCSS表示でズレないようにする方法
カエレバ・ヨメレバのサービス提供者であるかん吉さんより、正式にサービス提供方法？がAmazonから国内の市場に協力？することやAmazonのPA-APIの仕様変更？により、楽天（国内）メインに仕様変更…
-
平成になって何日目？今日でちょうど10000日目記念日!!
今は日本の元号では平成です。昭和から平成になった日が1989年1月8日です。私はまだまだ思春期になる頃か少しだけ手前だった頃のことです。あれからもうなんと10000日が経ったとは…。 平成生まれの子達…
「WordPress, カスタマイズ, カスタマイズ, 伝えたいこと, 備忘録」同じカテゴリーの記事一覧
おすすめの記事一部広告
danna 
ロイド
「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の知識も数値を変えたりするぐらいで、
コピペの場所が違うのかもしれません。
できましたら、やり方の指摘をしてもらえたら幸いです。
よろしくお願い致します。