EOS 6D Mark II・EOS Kiss M・α7RIIIの実体験お散歩カメラブログ。

ぽちろぐ

PC

このページはビデオ投稿のテストです。

更新日:

前の投稿でビデオをアップした際に、WordPress内蔵のMediaElement.jsを使って

[video mp4="https://pochilog.jp/sys/wp-content/uploads/2015/02/xxxxxxx.mp4"][/video]

としたところ、iPhoneで確認すると縮小して表示されませんでした。はみ出しちゃう。レスポンシブデザインがvideoタグに対して効いていないのですね。

twentyfifteen等にテーマを切り替えると縮小されるので、stinger5のCSSまたはfunctions.phpが悪さをしているのだろうと調べると、CSSでした。

.wp-video,
.mejs-offscreen,
.mejs-container,
.svg,
.wp-video-shortcode,
.mejs-video,
.mejs-inner,
.mejs-mediaelement,
.mejs-time-total { /*d7r*/
max-width: 100% !important;
}

上記をstyle.cssに足してもまったく効かず、ほとほと困り果てていたところ、stinger5の新バージョンのCSSをコピーしてきたらあっと今に直りました。

stinger5ver20141123ではダメ、stinger5ver20141227では正常に表示です。stinger5ver20141123は改造していますので、FileMergeで比較してみましたが、未だ原因は分かっていません。stinger5ver20141123にバグがあるのではなく、私の改造に間違いがあったものと思われます。

こちらの記事もオススメです。

-PC
-

Copyright© ぽちろぐ , 2018 All Rights Reserved.