hirokonaBlog

ググる→忘れそう→即時メモ 京都のWebデザイナーの備忘録

smp links – 動画関連

■スマホでの動画プレイヤー埋め込み
→youtubeでいんじゃね?
http://d.hatena.ne.jp/hokaccha/20111215/1323931222


■スマホのサイズにあわせてYouTube iframeの幅を変更する
YoutubeやHTML5video等の埋め込み動画のサイズをwindow幅に合わせて動的にリサイズ/可変にする方法
http://html5-css3.jp/tips/youtube-html5video-window.html

参考サイト補足:
Youtube(iframe版)でで親DIVに指定しているpadding-bottom 56.25%の
意味がわからんと思って調べたら縦幅の指定に必要なんですね。
padding-bottomの%指定によって導き出される値はコンテンツの幅から算出される(!)そうで。

なので幅:高さ = 100%:56.25%
動画の16:9比率のためそれにあわせてbox幅を作っておくと。
あと、padding-topの30pxはyoutubeのシークバーの幅っぽいです。

元記事:
http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/
※下の方のforIEはOLDIE向けのもよう。

ん~なるほど。


投稿日

カテゴリー:

投稿者:

タグ:

コメント

コメントを残す

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください