SSブログ

子猫にも貼れる YouTube mini 2 [s k i n]



〈子猫にも貼れる YouTube mini 1.1〉から早4年半!‥‥非力なiBookには荷が重いので暫く「FAVORITE-VIDEOS」の更新を控えていたが、MacBook Proに買い替えてからストレスなく視聴出来るようになった。その間にYouTubeの仕様もネコの目のようにクルクル変わった。プレイヤー3タイプ(Action Script 3、Action Script 2、HTML5)と埋め込み方式2種(iframe、embed)。デフォルトは「Action Script 3」と「iframe」で、埋め込みコードの「以前の埋め込みコードを使用する」(Use old embed code)にチェックを入れると旧コード(object/embed)を使える。単にブログに貼るだけなら埋め込みコードをコピペするだけだが、SWF URL「?」の後にパラメータを追加することで、好みの仕様にカスタマイズ可能。「Action Script 2」のみの機能だった外枠の有無と色変更は下記のスタイルシート(CSS)でも簡単に付けられるので、デフォルトで問題ないでしょう。

YouTube 埋め込みプレイヤー・コード(iframe)
<iframe width="530" height="299" src="https://www.youtube.com/embed/51EmXIcoiZU?version=3&amp;gl=US&amp;hl=en_US&amp;rel=1&amp;fs=1&amp;theme=dark&amp;color=red&amp;modestbranding=0&amp;autohide=2&amp;showinfo=0" frameborder="0" allowfullscreen style="border:solid 5px #cccccc"></iframe>

YouTube 埋め込みプレイヤー・コード(embed)
<embed src="https://www.youtube.com/v/51EmXIcoiZU?version=3&amp;gl=US&amp;hl=en_US&amp;rel=0&amp;fs=1&amp;theme=dark&amp;color=red&amp;modestbranding=0&amp;autohide=2&amp;showinfo=0" type="application/x-shockwave-flash" width="530" height="299" allowscriptaccess="always" allowfullscreen="true" style="border:solid 5px #cccccc"></embed>


YouTube 埋め込みプレイヤーのパラメータ
パラメータデフォルトオプション備考
theme=dark(黒)light(明るいグレー)コントロールバーの色
color=red(赤)white(グレー)シークバーの色
autohide=2*0(NO)/ 1(YES)コントロールバーを隠す
modestbranding=0(表示)1(非表示)YouTubeのロゴ
rel=1(表示)0(非表示)関連動画
fs=1(表示)0(非表示)フルスクリーン・ボタン
autoplay=0(NO)1(YES)自動再生
showinfo=1(表示)0(非表示)動画情報(タイトル)
controls=1(表示)0(非表示)コントロールバー
frameborder=" "0(非表示)1(表示)枠線

*コントロールバーが表示されたままシークバーだけが細くなります(TAN)



                    *


  • Lili Rochefort Photoshoot Cosplay
    (2012) Michelle Monique

  • YouTubeの埋め込みサイズの最小は560×315pxで、それ以下のサイズはサポートされていない。「カスタム」で画像の大きさは変えられても、タイトルやボタンなどは小さくならないのでバランスが悪くなる。上部のタイトルは一部しか表示されなくなるし、下部のコントロールバーは横並びのボタンやアイコンが重なって見難い‥‥というわけでサイドバーに貼るYouTube miniの各パラメータを非表示にして出来るだけシンプル化してみた。再生中にコントロールバーとシークバーを隠す(autohide=1)、YouTubeのロゴを非表示にする(modestbranding=1)、再生後の関連動画を非表示(rel=0)、フルスクリーン・ボタンを非表示(fs=0)、動画情報(タイトル)を非表示(showinfo=0)‥‥コントロールバー全体を非表示(controls=0)にする方法もある。デフォルトの場合は「version=3」も含めて記述する必要はないけれど、オプションを追加する場合は「&amp;」で繋げて行く。CSSで外枠(border)を指定すると、枠線のパラメータ(frameborder=" ")は無効化する。

    YouTube 埋め込みプレイヤー・コード(iframe)
    <iframe width="187" height="125" src="https://www.youtube.com/embed/51EmXIcoiZU?version=3&amp;gl=US&amp;hl=en_US&amp;rel=0&amp;fs=0&amp;theme=dark&amp;color=red&amp;modestbranding=1&amp;autohide=1&amp;showinfo=0&amp;controls=1" frameborder="0" allowfullscreen style="border:solid 3px #cccccc"></iframe>

    YouTube 埋め込みプレイヤー・コード(embed)
    <embed src="https://www.youtube.com/v/51EmXIcoiZU?version=3&amp;gl=US&amp;hl=en_US&amp;rel=0&amp;fs=0&amp;theme=dark&amp;color=red&amp;modestbranding=1&amp;autohide=1&amp;showinfo=0&amp;controls=1" type="application/x-shockwave-flash" width="187" height="125" allowscriptaccess="always" allowfullscreen="false" style="border:solid 3px #cccccc"></embed>

                        *

    Lili Rochefort Photoshoot Cosplay(Jen)
    Lili-Rochefort-Jen-Michelle-Monique.jpg

    © Michelle Monique



    Lili Rochefort Photoshoot Cosplay(Mackenzie)
    Lili-Rochefort-Mackenzie-Michelle-Monique.jpg

    © Michelle Monique



    対戦格闘アクション・ゲーム『鉄拳』シリーズの金髪美少女キャラ、エミリ・リリ・ロシュフォール(Emilie de "Lili" Rochefort)。モナコ石油王の一人娘という設定で、『鉄拳 5 DARK RESURRECTION』(namco 2005)から参戦。 ミッシェル・モニーク(Michelle Monique)の作品はCGかと見紛うほどだが、リリ嬢に扮した2人のモデル、ジェン(Jen)とマッケンジー(Mackenzie)を撮った実写を加工している。ゲームやアニメ・キャラのコスプレおたくたちも、これくらいの完成度(容姿・衣裳・決めポーズ・アクション)で披露して欲しいですね。スティルとアクション、アイドル顔の可愛いリリちゃんと前宙・側転・跳び蹴りのクールビューティ・リリさま。あなたの好みはどちらかしら?‥‥リン・シャオユウ(Ling Xiaoyu)や風間飛鳥(Asuka Kazama)の「フォトシュート・コスプレ」も見たいにゃあ。

                        *



    YouTube 埋め込みプレイヤー・コード(iframe)
    <iframe width="530" height="299" src="https://www.youtube.com/embed/iM40jg8ig6o?version=3&amp;gl=US&amp;hl=en_US&amp;rel=1&amp;fs=1&amp;theme=light&amp;color=white&amp;modestbranding=0&amp;autohide=2&amp;showinfo=0" frameborder="0" allowfullscreen style="border:solid 5px #cccccc"></iframe>

    YouTube 埋め込みプレイヤー・コード(embed)
    <embed src="https://www.youtube.com/v/iM40jg8ig6o?version=3&amp;gl=US&amp;hl=en_US&amp;rel=0&amp;fs=1&amp;theme=light&amp;color=white&amp;modestbranding=0&amp;autohide=2&amp;showinfo=0" type="application/x-shockwave-flash" width="530" height="299" allowscriptaccess="always" allowfullscreen="true" style="border:solid 5px #cccccc"></embed>

                        *
                        *



    コメント(0)  トラックバック(0) 

    コメント 0

    コメントを書く

    お名前:
    URL:
    コメント:
    画像認証:
    下の画像に表示されている文字を入力してください。

    トラックバック 0