3

tumblrテーマを作成しました。tumblrのビデオアップロードにビデオを投稿することを決定するまで、すべてが機能していました。メインページに250x196ピクセルのボックスがあり、すべてが入ります。

  • 写真の場合は、250x196ピクセルにします(アスペクト比は気にしません。アスペクト比を維持するためにjQueryを使用しましたが、結果が気に入らなかった)。
  • フォトセットの場合は、anythingsliderを使用してスライドを作成します。
  • テキスト投稿の場合は、jqueryを使用して、最初の画像をタンブネイルとして使用します。
  • 写真と同じ動画なら。iframeのサイズを変更するだけです。少なくともそれは私がやっていたと思ったことです。

また、画像とビデオの両方のライトボックスクローンとしてprettyphotoを使用しています。

したがって、tumblrアップロードビデオを使用したとき、次の問題が発生しました。

  1. 最初に、ビデオはiframeのアスペクト比を取得しませんでした。その理由は、高さのデータ値である可能性があり、iframeで使用されていると思います。
  2. あなたがここで見ることができるように; iframeを表示するには、インライン方式を使用していました。私はビデオの500ピクセルバージョンを持っていた隠されたdivを持っていました。問題は、{Video-250}変数と{Video-500}tumblr変数の両方が同じIDのtumblrビデオのdivを作成することです。そのため、非表示のビデオを取得して、250ピクセルバージョンの隣に移動します。
  3. ビデオ用のtumblrのライトボックスのビルドは、prettyphotoと競合していました。ビデオの全画面をクリックしていたとき、z-indexに問題がありました。私はすでに多くの問題を抱えていたので、この問題の解決に時間を費やしませんでした。

回避策として、私がしたことはこれでした:

 <div class="media" data-embed="{JSVideoEmbed-250}" data-video="{JSVideo-250}"></div>

あなたは私が3つのランダムなビデオで作成したテストブログで私が何を意味するかを正確に見ることができます:

http://stroumfaki.tumblr.com/

しかし、サイズ変更の問題はまだ残っています。iframeは250x196ピクセルですが、コンテンツはそうではありません。また、tumblrが最初の唯一のビデオにjavascriptを投稿する理由もわかりません。ページの最後に投稿するのと同じスクリプト。

私が尋ねることは、明確にするのが少し難しいかもしれません。テストブログが私の意味を理解するのに役立つことを願っています。

4

1 に答える 1

3

レスポンシブ埋め込みを使用してみてください - これにより、ムービーがコンテナーを埋めるようにスケーリングされます: http://webdesignerwall.com/tutorials/css-elastic-videos

于 2013-03-01T16:28:46.677 に答える