アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦！ -313ページ目

ブログ画像一覧を見る

このブログをフォローする

<< 前のページへ最新 | 311 | 312 | 313 | 314 | 315 | 最初次のページへ >>

ThickBox ＋ YouTube

ThickBoxを使って YouTube を記事に貼り付ける

使っているスキンが3カラムだから端が切れちゃう・・・

小さくしないと記事中に収まらない・・・・

ふっふっふ・・・・ThickBoxなら「そんなの関係ない！！」

可愛いネコちゃん・・・の場合

※15秒の短い映像をサンプルに使用しています

　各サムネイルをクリックして動き方を確認してください

　また実際に記事に貼り付ける場合はサムネイルをクリックしたら

　YouTubeが立ち上がることをわかりやすくしておく必要があると思います

YouTubeのサイトから上のようなobjectタグをコピーしてきてメモ帳等に貼り付けてから

下のように書き換えて記事のHTMLタグを表示で貼り付けます※タグ編集エディタでも出来ます

はじめにサムネイル画像を記事中に貼り付けてから

手打ちになりますがHTMLタグを表示にして↑を書き込みます

メモ帳とかで作っておいてコピペするほうが確実です

ThickBoxに表示するタイトルは title="たいとる" ここに書きます（不要の場合はtitle=""は削除します）

objectタグは境界線の表示の有無でheight="373"やheight="355"となりますが関係ありません

縦横をどんなサイズにしても、一定の表示比率で表示されますので映像が崩れることはありません
サイズが合わなければ余白が出来るだけです、↓下の各サンプルで確認下さい

ThickBoxで表示すると上にタイトル部分が付きますのでheight=365　width=425　あたりがいいような・・

<a class="thickbox" title="YouTube" href=http://www.youtube.com/v/tLgDqmZ-STk&hl=ja?KeepThis=true&TB_iframe=true&height=355&width=425>ここをクリック</a>

の、ようにテキストからのリンクでもＯＫです

↓標準の場合

YouTubeを再生するいくつかのスイッチが存在します

たとえば・・・日本語サイトでしたらすでに　&hl=ja という日本語だよってスイッチが付いてきます

（英語なら　&hl=en）これはべつになくても動くんですが、

&hl=enにしたからって音声が日本語から英語になるわけではありません・・・・

あったらすごい便利なんですけどね・・・・・動物の鳴き声は変わっているかも・・・・ん？

自動再生させたい場合は・・・・　&autoplay=1 または &autoplay=1

ループ再生させたい場合は・・・　&loop=1 または &loop=1

<a class="thickbox" title="YouTube　ループ再生" href="http://www.youtube.com/v/tLgDqmZ-STk&loop=1&hl=ja?KeepThis=true&TB_iframe=true&height=365&width=425"><img src="サムネイル画像のURL" /></a>

　height=365　width=425　にしてみました

自動再生＆ループ再生させたい場合は・・・ &autoplay=1&loop=1 のように組み合わせてください

　height=425　width=350　と逆にしてみました

他にも・・・・

境界線を表示させる &border=1
関連する動画を含めない &rel=0
youtubeが高画質になる（一部の動画のみ）？？？ &fmt=18(&fmt=16・・って説も)

たぶんノーマルな　　　　　　　&fmt=6

・・・・・などがあります
順番は関係ありません必要な物を加えるだけです

またアメブロによって編集中に & が & に変えられる場合がありますがそのままでもOKです

←これは？

直接YouTubeを記事に貼り付けるのでしたら必要はありませんが

ThickBox でYouTube　を使うためにはクリックさせるためにサムネイル画像が必要です

・・・・・　うっふっふっ。。。　あるんだな～　これが・・・・・・

サンプルのようにVdeoのIDが「tLgDqmZ-STk」だとしますと

http://img.ytimg.com/vi/tLgDqmZ-STk/default.jpg
http://img.ytimg.com/vi/tLgDqmZ-STk/1.jpg
http://img.ytimg.com/vi/tLgDqmZ-STk/2.jpg
http://img.ytimg.com/vi/tLgDqmZ-STk/3.jpg
↑↓↓どちらも同じ画像です

http://i.ytimg.com/vi/tLgDqmZ-STk/default.jpg
http://i.ytimg.com/vi/tLgDqmZ-STk/1.jpg
http://i.ytimg.com/vi/tLgDqmZ-STk/2.jpg
http://i.ytimg.com/vi/tLgDqmZ-STk/3.jpg

↑↑↓どちらも同じ画像です
http://s4.ytimg.com/vi/tLgDqmZ-STk/default.jpg
http://s4.ytimg.com/vi/tLgDqmZ-STk/1.jpg
http://s4.ytimg.com/vi/tLgDqmZ-STk/2.jpg
http://s4.ytimg.com/vi/tLgDqmZ-STk/3.jpg

default.jpg

1.jpg

2.jpg

3.jpg