0

私が開発している tumblr テーマでは、fitvids.js を使用して動画をレスポンシブにしています。

一般的な埋め込み (YouTube、Vimeo など) はすべて魔法のように機能します。

Tumblr ビデオのアップロード (tumblr ビデオ プレーヤー) をサポートするように FitVids.js を編集しました。デスクトップでは正しく動作しますが、モバイル デバイスでは動作しません。画像がトリミングされ、再生ボタンが大きすぎてビデオ コンテナーを超えています。ビデオをまったく再生できません。

このページでは動作しますが、方法がわかりません: http://mikehacks.tumblr.com/post/86858788257

私のhtmlは：

<div class="video-container">
  <p>{VideoEmbed-700}</p>
</div>

video-container は、マージンを追加するためだけのものです。

.video-container {
  margin-top: 30px;
}

私はこの質問を読みましたが、私は fitvids,js に依存しており、ユーザーが縦横比のタグを追加することを期待できません。また、これは珍しいアスペクト比では機能しません。新しい質問を開始して申し訳ありません。まだコメントできません。

私は本当にこれにこだわっています。どんな助けも大歓迎です!

4

1 に答える 1

1

ついにモバイルで tumblr ビデオが動作するようになりました。まだ fitvids を使用しています。それはかなり単純ですが、誰かがこれを便利だと思うかもしれません:

tumblr ビデオ プレーヤーは、モバイル デバイスではまったく異なるマークアップを持っているため (これはビデオへのリンクにすぎません)、fitvids がそれに対して何もしないことは明らかです。

この単純な CSS を使用して、タッチ デバイスでのみ tumblr ビデオを微調整しました。

.touch .video-container a {
    width: 100% !important;
    height: auto !important;
}

({VideoEmbed-700} の前後にある p タグを削除しました。これは、ビデオがまったく再生されない原因となったためです。) ご参考までに、タッチ クラスは Modernizr によって生成されます。

この方法では、縦横比のタグを扱う必要はありません!

于 2014-09-01T23:26:01.460 に答える