読者です 読者をやめる 読者になる 読者になる

Youtubeをブログに貼り付けても重くならないようにする自作のjavascript等を紹介します

f:id:aruku-hato:20170418213039p:plain

ブログカスタマイズって意外と面倒くさいと思っているはとです。こんにちはこんばんは

面倒くさいけどやりたくなるのがブログカスタマイズ。一度手を付けると納得がいくまで手がやってしまうのがブログカスタマイズ。初心者には何が起きているのかさっぱり解らないブログカスタマイズ。
というわけで、今回ブログカスタマイズの記事です。

今回紹介するのは、以前から当ブログでたまに使っているYoutubeをいい感じに貼り付ける方法です。

自分のブログでは、上記の記事とかで使用しています。

はてなブログでよく見るYoutube貼り付けは、シロマティさんが紹介しているものが多い気がします。これを使うのも良いと思いましたが、自分的には3つの問題点があったので自作しました。

shiromatakumi.hatenablog.com

  • 貼り付けるHTMLを書くのが若干面倒くさい
  • 貼り付けた画像と動画の大きさが異なる
  • Javascriptが動かない場合、なんにも表示されなそう

まあ、いちゃもんレベルの話です。はてブもめっちゃついてるし、はてなブログ自体がJavascriptありきの表示ですもんね。

とっととコードとかを紹介します

HTML部分

<p class="yt"><a href="Youtubeに載っている共有URL">動画タイトル</a></p>

ただのYoutube動画への文字リンクを貼るだけです。忘れては行けないのは <p class=“yt”> </p> で囲った中にリンクを貼ることだけです。

詳しい使い方は後述します。

Javascript部分

<script>
/**
 *  youtube 用
 *  参照元url: http://aruku-hato.hatenablog.com/entry/yt_custom
 */
var yt_img_src = 'https://cdn-ak.f.st-hatena.com/images/fotolife/a/aruku-hato/20170303/20170303004650.png';

/* 自分のブログに画像を置く場合 */
// var yt_img_src = '画像URL';

if ( document.getElementsByClassName ) {
  var yt = document.getElementsByClassName('yt');
} else{
  var yt = [];
  var all = document.getElementById('main').getElementsByTagName('*');
  for (var i = 0, j = 0; i < all.length; i++){
    if ( all[i].className == 'yt' ){ yt[j] = all[i]; j++; }
  }
};

var yt_flame = document.createElement("iframe");
yt_flame.setAttribute('id', 'yt_flame');
yt_flame.setAttribute('width', '560');
yt_flame.setAttribute('height', '315');
yt_flame.setAttribute('allowfullscreen', '');

if( yt.length ) {
  for( var i = 0, l = yt.length; l > i; i++ )(function(n) {
    var e = yt[n];
    var yt_url = e.firstChild.href;
    var yt_id = yt_url.replace(/https:\/\/youtu.be\// , '');
    var yt_txt = e.textContent;
    var yt_bg = 'http://i.ytimg.com/vi/' + yt_id;
    if (e.className == "yt yt0") {
      yt_bg = yt_bg  + '/0.jpg';
    } else{
      yt_bg = yt_bg  + '/sddefault.jpg';
    }
    var yt_img = '<img src="'+ yt_img_src +'" width="560" height="315" alt="' + yt_txt + '" style="background-image: url(\'' + yt_bg + '\')" class="ytimg" />';
    var yt_video_src = 'https://www.youtube-nocookie.com/embed/'+ yt_id +'?rel=0&autoplay=1';

    function yt_click (x) {
      x.preventDefault();
      yt_flame.setAttribute('src', yt_video_src);
      e.appendChild(yt_flame);
    }

    e.firstChild.innerHTML = yt_img;
    e.firstChild.setAttribute('data-title', yt_txt);
    e.firstChild.onclick = yt_click;

  })(i);
}
</script>

文字リンクを画像とかにガチャガチャと置き換えているので長いです。jQueryを使わないので、表示が早めです。

CSS部分

<style>
/**
 *  youtube 用
 *  参照元url: http://aruku-hato.hatenablog.com/entry/yt_custom
 */
.entry-content img.ytimg {
/*  max-width: 560px;*/
  width: 100%;
  height: auto;
  vertical-align: bottom;
  border-width: 0;
  background-position: center;
  background-size: 100% auto;
  display: inline-block;
}
.yt {
  margin: 1em 0 3em;
  position: relative;
}
.yt a::before {
  content: attr(data-title);
  display: block;
  position: absolute;
  max-width: 550px;
  text-decoration: none;
  color: #fff;
  font-size: 14px;
  padding: 3px 10px;
  text-shadow: 0 0 3px #000;
}
.yt iframe {
  width: 100%;
  height: 100%;
  border: none;
  position: absolute;
  top: 0;
  left: 0;
  display: block;
}
</style>

貼り付けるCSSは以上です。

記事の幅いっぱいに画像が広がるのがイヤな方は、最初のmax-widthのコメントアウトを外して調整してください。

パソコンはフッター部分、スマホは記事下のHTML記述欄にcssjavascriptを貼り付けて下さい。

使い方

貼り付けたい動画の共有を押した時に出てくるurlをコピー

f:id:aruku-hato:20170418213157p:plain

記事を書くページのリンクを選ぶ

<p class=“yt”> </p> のhtmlをあらかじめ書いておき、その間にカーソルが点滅している状態で作業をするのが楽です。

f:id:aruku-hato:20170418213203p:plain

最初にコピーしたurlを貼り付けてプレビューを押す

f:id:aruku-hato:20170418213210p:plain

出てきた一覧の『タイトル』を選び、リンクを挿入

f:id:aruku-hato:20170418213224p:plain

改行があるので整える

改行がある場合、javascriptでエラーがおきます。

f:id:aruku-hato:20170418213232p:plain

補足1

Youtube側の仕様で、小さいサムネイルしか表示できない動画もあります。 その際は

<p class="yt yt0"><a href="Youtubeに載っている共有URL">動画タイトル</a></p>

と、classにyt0を追加して下さい。

完成

乃木坂46 『意外BREAK』Short Ver. - YouTube

もちろんすべて手打ちでhtmlを書き込んでもいいです。自分は手書き派です。

補足2

使用している画像は、このブログで管理しているものになっています。
自分できちんと管理しておきたい方は、

f:id:aruku-hato:20170303004650p:plain

この画像を一度自分のブログにアップしてそのurlを上記のjavascript

var yt_img_src = 'https://cdn-ak.f.st-hatena.com/images/fotolife/a/aruku-hato/20170303/20170303004650.png';

/* 自分のブログに画像を置く場合 */
// var yt_img_src = '画像URL';

この部分を

//var yt_img_src = 'https://cdn-ak.f.st-hatena.com/images/fotolife/a/aruku-hato/20170303/20170303004650.png';

/* 自分のブログに画像を置く場合 */
var yt_img_src = 'あなたのブログにアップした画像URL';

このように書き換えて下さい。

もしかしたらこの画像を自分がうっかり消しちゃうかもしれませんよ!
その時のためにも、自分で画像を管理することをお勧めします。

問題点

無料版のはてなブログでは、レスポンシブデザインにしないかぎりスマホで表示が出来ません。記事中に上記のjavascriptcssを貼り付ければ良いんですが、正直面倒くさいので考えものです。

ですが、スマホでもリンクとしては機能するので、その点は問題ないとは思います。

読み飛ばして良い、技術的な話

javascriptは特に難しい事はしていません。for文を即時関数を回しているのがちょっと変な感じがする位でしょうか。

書き換えられたhtmlは、透過PNGのimg要素の背景にYoutubeのサムネイル画像を表示させることでそれっぽく見せています。
p.ytの幅と高さを画像と同じにすることで、クリックで表示されるiframeをCSSで画像と同じ幅と高さを保つようにしています。ちょっと言葉では解りづらいですね。
とりあえず、そうすることでレスポンシブデザインのページでも綺麗に動画の比率を保ったまま表示することが出来ます。

一度画像上をクリックするとiframeが出現し、その後に他の画像をクリックした場合はiframeの位置が移動されてsrcを書き換えたものが表示されます。

最後に

コピペおkですが、カスタマイズは自己責任で。元々書いてあるものの保存は忘れずに。

自分の中では結構イケてる表示になっています。
正直、自己満足な部分があるので、誰かに需要があるのかは謎です。

技術的な質問はブコメか下のコメントに書いてもらえれば対応するかもしれないですけど期待はしないで下さい。

こちらからは以上です。

広告を非表示にする