YouTubeの動画を綺麗に表示させるJavaScript「PrettyEmbed.js」

いまや動画の再生にYouTubeは欠かせない存在です。
YouTubeにアップした動画を表示させる際には公式のiframeダグを利用するケースが多いと思いますが上下にバーがつくなどちょっと物足りないですよね。
jQueryプラグインのPrettyEmbed.jsを利用すれば見た目を簡単に調整することが可能です。
YouTubeの動画を綺麗に表示させるJavaScript「PrettyEmbed.js」サンプル

使用方法
PrettyEmbed.jsからファイル一式をダウンロードします。
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.prettyembed.js"></script> <script>
$(document).ready(function() {
$('#video').prettyEmbed({
videoID: 'WA4iX5D9Z64', //YouTubeの動画ID
previewSize: 'hd', //サイズsmallest to largest: thumb-default, thumb-1, thumb-2, thumb-3, default, medium, high, hd
customPreviewImage: '', //サムネイルをオリジナルにする場合
showInfo: false, //トップに出るインフォメーションバー
showControls: true, //プレイヤーのコントローラー
loop: false, //ループさせるか
// colorScheme: 'dark', //カラー
showRelated: false //関連動画を表示するか
// useFitVids: true //<a href="http://fitvidsjs.com/">FitVids.JS</a>でレスポンシブ対応させるか
});
});
</script>

あとは動画を表示させたい場所に下記を記述するだけです。
<div id="video"></div>
YouTubeの動画を綺麗に表示させるJavaScript「PrettyEmbed.js」サンプル

sponsors

「YouTubeの動画を綺麗に表示させるJavaScript「PrettyEmbed.js」」をシェアする

記事作成:
記事URL:

TOP > > > YouTubeの動画を綺麗に表示させるJavaScript「PrettyEmbed.js」