>freo> [freo向け]ブログに貼りまくったYouTubeを軽くする

エントリー

[freo向け]ブログに貼りまくったYouTubeを軽くする

  • 2014/09/28 13:47
  • freo

ブログで再生させようと、
Youtubeの動画を貼りまくっていると重くなります。
貼りまくってる人は重くなった経験はあるはず。
iframeでYoutubeから動画情報を取得するのに時間がかかるようです。

これが普通の共有リンクですね

<iframe width="680" height="383" src="//www.youtube.com/embed/PqJNc9KVIZE" frameborder="0" allowfullscreen></iframe>

ブログに貼ると↓感じになります。
まぁ普通ですね。YouTubeの共有リンクそのままですし。

img(画像)で表示しておき、
クリックされたらiframeに切り替えて、動画を再生させます。

<img src="Youtubeの動画サムネイルURL" width="表示させたいサムネイルの幅" height="表示させたいサムネイルの高さ" data-video="http://www.youtube.com/embed/動画ID?autoplay=1">

サムネイルURLがわからない場合は、
YouTube Thumbnail Generatorを使うと便利です。
最大サイズのサムネイルはhttp://img.youtube.com/vi/動画ID/maxresdefault.jpg
Youtubeからのサムネイルは使わず、自分で作った画像でもいいですけどね。
画像タグにdata-video=""をつけてるだけですし。

動画よりも下に以下のスクリプトを埋め込む。
freoのtinyMCEはjavaスクリプトを記事に入れようとすると勝手に書き換えられてしまうため、
templates\footer.htmlの</body>の直前あたりに以下を挿入。
footer.htmlをサーバーにアップロードしたら、
templates_cフォルダ内のキャッシュの削除もお忘れなく。

{literal}<script>
$('img').click(function(){
video = '<iframe src="'+ $(this).attr('data-video') +'" frameborder="0" width="動画の横幅" height="動画の縦幅"></iframe>';
$(this).replaceWith(video);
});
</script>{/literal}

記事に書き込む動画は以下のようになります。

<img src="http://img.youtube.com/vi/PqJNc9KVIZE/maxresdefault.jpg" width="680" height="383" data-video="http://www.youtube.com/embed/PqJNc9KVIZE?autoplay=1">

width="680"は私のブログが680px幅だからです。
maxresdefault.jpgは画像が大きい=ファイルサイズも大きい。
なのでブログの記事幅が小さい場合は小さいサムネイルを使ったほうが軽くなります。
サムネイルの大きさや動画の横幅縦幅については各自のブログで調整してください。

実際の設置例はこんな感じです。
サムネイル画像をクリックすると、動画に切り替わって再生されます。

別途jqueryを使用します。
freoはディフォルトでjqueryが使用されてますので、
特にいじってなければjqueryについては気にしなくて平気。

ページ移動

コメント

コメント欄への投稿方法や内容につきましては、
記事へのコメント投稿についてを参考にしてみてください

コメント欄の投稿は公開されます。
非公開を希望する内容につきましては、みさきる!管理者へ連絡をお使いください。

comments powered by Disqus

ユーティリティ

スポンサードリンク

検索

カテゴリー

新着記事

    新着コメント

    スポンサードリンク

    つぶやき

    スポンサードリンク