実装あるある・YOUTUBEのサムネイルをオリジナル画像にしたい。

Web制作 , テック系 3月 07, 2017 No Comments

同じようなマークアップを何度かしたことがあります。youtubeのオリジナルサムネイル機能を使うとかそういう話ではなくて、iframeの上に画像を乗せてクリックしたら動画が始まるってやつを作ります。とってもシンプルなのでyoutubeのAPIを使ってとかではないですよ。

だけど正確にいうと
画像がある→クリックする→画像を消してyoutubeをHTMLに書き出す→と、同時に再生する

という流れになります。IE9でも動きました。

一つのページに何個もyoutubeを埋め込むパターンで書いています。読み込みたいyoutubeのurlはみなさんの環境で適宜変えてくださいね。
これで動かなかったら最初の

と最後の

を消してみてください。

サンプルはこちら

youtubeのAPIを使ったもっと難しいやつはこちらの記事が参考になります。
http://www.tam-tam.co.jp/tipsnote/javascript/post6217.html

ほなね

【PR】 社会人のための<格安>語学留学【寮・食事付き】172,000円/1ヶ月 の完全マンツーマン留学 フィリピン政府公式認定語学学校【NILS】

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA