YouTube動画が軽量化(HTML)させたけど見れなかったよって人へ。

こんにちは、こんばんは、初めまして?

☆海貝あかりと申します。

今回はお代の通り、軽量化したけどなんか失敗したよ?っていうお話です。(今回も木ノ下コノキさんの発見によりコメントにて頂戴しました。いつもありがとうございます><)

?目次・めにゅ~

スマホから見てという記事をあげてから

f:id:UmikaiAkari:20180309001920p:plain

以前上げた記事でこんな記事があります。

umikaiakari.hatenablog.com

ここで、HTMLや動画軽量方法などを教えていただいた方や参考にした方などをご紹介させていたのですが、コピペ禁止のHTMLをテストで潜ませていたためかうまくリンクが踏めなかったり、動画もきちんとアップできていなかったりと災難続きでした^^;

しかもそれをご指摘いただいてから気づく……という。

なので今回はYouTube軽量HTMLに特化して取り上げていこうかと思います。

参考にさせていただいた方々

f:id:UmikaiAkari:20180308203814p:plain

まず、毎回お世話になっております。

木ノ下コノキ

www.kinoshitakonoki.com

そして、ご紹介いただいた、ふー

www.fulogabc.net

どうすれば動画として動いてくれるのか

こちらの軽量の仕方は、動画を一枚の写真として読み込むことで、写真画像をクリックしたときに動画が読み込まれるシステムで、それゆえ軽量化になるというコードでした。

f:id:UmikaiAkari:20180302225343p:plain

ですが、お察しの通り、うまくいかなかったのです。

コノキさんからアドバイスをいただき、どうもふーログで紹介されているふー様のものはCSSコードは使用すると挙動がおかしくなるとのことでした。

HTMLは何を貼り付ければいいの?

結局、うまくいかなかったならどうすればいいわけ?となりますよね。

f:id:UmikaiAkari:20180302130513p:plain

どうもCSSを貼り付けてしまったせいで挙動が若干おかしくなっていたようで、まずこちらを参照に下記のコードを貼り付けてしまった方はこれを↓消してください。

<style>
.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;
}

</style>

 

そして、削除したうえで、ようつべポンの動画コードをHTMLにはりつけてください。

ようつべタグぽん ver.2.0

 

そして、毎回記事に

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.3.min.js"></script>
<script>// <![CDATA[
$('.youtube').click(function(){
video = '<iframe src="'+ $(this).attr('data-video') +'" frameborder="0" width="480" height="270"></iframe>';
$(this).replaceWith(video);
});
// ]]></script>

と、貼り付けてください。

 

ふーログさんでも紹介されていますが、記事内にいくつ動画があろうとこのコードは1記事につき1つで大丈夫です。

これでようやく普通に見れるようになったので、これまで見れなかった過去記事のこちらもお願いします><

umikaiakari.hatenablog.com

☆海貝あかり