このページはビデオ投稿のテストです。
2015年02月22日
前の投稿でビデオをアップした際に、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にバグがあるのではなく、私の改造に間違いがあったものと思われます。
この記事は2015/02/22に公開され、80 views読まれました。