Affinger5でVideo画面が崩れる対策

投稿日:2019年5月5日 更新日:

 

Affinger5でSimplycity2では問題なかったビデオ画面が崩れる問題に遭遇しました。 取り敢えず対策方法が判りましたので、紹介します。

 

 

スポンサーリンク

 

ビデオ画面が崩れる現象

当ブログは。ビデオを埋め込む時、MediaElement.jsというプラグインを使って、AudioとVideoをショートコードで埋め込んでいます。 Videoの設定は、以下の様にDefaultの横幅は、100%、Defaultの高さは270pxで設定していました。

この設定でVideoのショートコードを設定しVideo再生すると、下のように画面が崩れてしまいました。

 

Video画面が崩れた!!

Simplycity2でのVideo画面

 

原因の特定

Video画面が崩れている要素を、Chromeブラウザの「検証」で探ってみますと、以下のコードのheight:autoに問題がある様で、これを外してみますと正常になることが判りました。

img:not(.size-st_header_slider),
video,
object {
max-width: 100%;
height: auto;
border: none;
vertical-align: bottom;
}

 

改善策

以上のCSSコードは、Affinger5(親)テーマのStyle CSSの156行目辺りにあります。 height: auto;を単純に削除すると、Video画面は正常になりますが、サイドバーのサムネール画像が崩れてします。

ポイント

そこで、Video に対してAffinger5子テーマのStyle CSSに、以下コードを追記しますとSimplycity2のVideo画面の時と同じになり改善しました。

video{
height:100%;
}

 

もし、Affinger5テーマでVideo画面が崩れるような現象に遭遇したら、以上の対策をお試しください。

 

 

 


スポンサーリンク

〜〜〜〜〜〜〜〜〜〜〜

 

おすすめ記事

1

  レコードのハイレゾ録音へのヒント(Tips)   ハイレゾ録音のヒントになればと、 今までのレコードのハイレゾ録音を通して、思いつくまま必要と思われることを書き留めましたのでご ...

2

  これまでの当ブログ記事(テストレコードなどのブログ)の知見を通して、アナログ・レコードが音質的に不利な点が多々見つかりました。 アナログレコードの音質を好ましく思っている一人で、本当はあ ...

3

年代モノのレコードプレーヤTRIO(KP-51F)を使ってレコードのハイレゾ録音を行っていますが、このプレーヤの実力を知るためにテストレコード(AD-1)使って定性的な特性を調べ、断片的な記事を投稿し ...

4

eonkyoからDL購入したハイレゾファイルを基準音源にして、基準音源と同一録音のレコードをMCカートリッジとMMカートリッジでハイレコした音源の音質比較を試みました。 MCカートリッジは、オルトフォ ...

5

「HAP-Z1ESのDSEEとDSDリマスタリングエンジンの効果検証」(以前のブログ記事)は、 実際のLPレコードからハイレゾ化したリアルサウンドでDSEEを評価したものでした。 今回は、正弦波の組 ...

Copyright© ハイレコのブログ , 2019 All Rights Reserved Powered by AFFINGER5.