2016/01/31 Sun.
このサイトをHTML5で書き換えたので、レスポンシブ対応で動画を貼ったりするのも楽になってそう。こんな感じっぽい。
最近ハマっているのは「fox capture plan」、去年の11月くらいからハマって、通勤中はこれしか聴いてない。
ドラムがカッコいいのが素敵、テンション上がってくる。が、Chromeで開発者ツールを開くと、テンション下がりまくる。
GET chrome-extension://boadgeojelhgndaghljhdicfkmllpafd/cast_sender.js net::ERR_FAILED GET chrome-extension://dliochdbjfkdbacpmhlcpmleaejidimm/cast_sender.js net::ERR_FAILED GET chrome-extension://pkedcjkdefgpdelpbcmbmeomcjbeemfm/cast_sender.js net::ERR_FAILED GET chrome-extension://fjhoaacokmgbjemoflkofnenfaiekifl/cast_sender.js net::ERR_FAILED
うーん、この惨状。開発者ツールでApple iPhone 6とかのモバイルにすると出ないけど、PC扱いだと出るんだよな。
「Google Cast SDKのIssue 309」を見ると、とにかく直してくれとの訴えが大量に。これは見ていて心臓に悪いっす。
あと、動画を貼った時に、PCだと横幅100%で表示されてるのが気に食わない。モバイルだといい感じになるんだけどね。
ウチのサイトのコンテンツ部分は基本的に1カラムデザインなので、横幅100%持っていかれると、何だか微妙な気がする。
もうちょいCSSを触らないとダメっぽい。とりあえず動画を貼る<iframe>を囲う<div>のwrapperだけ用意しとこう。
2016/01/31 ここから先を追記
何となく直してみた。モバイルでもないのに動画が横幅100%で貼られているのはアレだったし。簡単に直ってよかった。
が、Chromeだと問題無いのに、IEだと挙動がおかしい。画面スクロール時に、貼った動画がnavbarの前面に出てしまう。
Android 4.0.4のデフォルトのブラウザでも平気なのに。ちょっと検索してみると、「Stack Overflowに同じ内容」があった。
wmode=transparentを指定すると、IEでもChromeでもAndroid 4.0.4のデフォルトブラウザでも正しい表示になった。
実際に動かしてみないことには、わからんことばかりだ。やっぱりウェブ絡みの情報を調べている時が一番楽しい。