Youtube のスクリーンショット | リアナのカスタマイズ日記(CSS編集用デザイン)

リアナのカスタマイズ日記(CSS編集用デザイン)

アメブロ 新CSS CSS編集用デザイン 無料
カスタマイズ アメブロカスタマイズ 初心者
CSS スタイルシート デザイン
javascript jQuery

★ Youtube のスクリーンショット


● 内容

① YouTubeのスクリーンショットの画像のURLについて

② 下記の動画の例
  下記の動画の動画ID(ビデオID)は、XHdcW2axwMkです。

http://www.youtube.com/watch?v=XHdcW2axwMk


③ スクリーンショットのURLと画像の例


画像の大きさ(幅×高さ) 120×90
http://img.youtube.com/vi/XHdcW2axwMk/default.jpg





画像の大きさ(幅×高さ) 480×360
http://img.youtube.com/vi/XHdcW2axwMk/hqdefault.jpg





画像の大きさ(幅×高さ) 480×360
http://img.youtube.com/vi/XHdcW2axwMk/hq1.jpg





画像の大きさ(幅×高さ) 480×360
http://img.youtube.com/vi/XHdcW2axwMk/hq2.jpg





画像の大きさ(幅×高さ) 480×360
http://img.youtube.com/vi/XHdcW2axwMk/hq3.jpg





画像の大きさ(幅×高さ) 480×360
http://img.youtube.com/vi/XHdcW2axwMk/0.jpg





画像の大きさ(幅×高さ) 120×90
http://img.youtube.com/vi/XHdcW2axwMk/1.jpg





画像の大きさ(幅×高さ) 120×90
http://img.youtube.com/vi/XHdcW2axwMk/2.jpg





画像の大きさ(幅×高さ) 120×90
http://img.youtube.com/vi/XHdcW2axwMk/3.jpg







④ 動画のサムネイルにする場合は、大きな画像を使って、width
 幅を小さくすれば、画質は落ちません。

例(200pxの例)

<img src="http://img.youtube.com/vi/XHdcW2axwMk/hqdefault.jpg" width="200">






⑤ ビデオボックス での利用例

<a href="http://www.youtube.com/watch?v=XHdcW2axwMk"><img src="http://img.youtube.com/vi/XHdcW2axwMk/hqdefault.jpg" width="200"></a>