1

次のソリューションを使用して、動画投稿タイプのレスポンシブを介して Tumblr に YouTube 動画を埋め込むようにしています。

.video-wrapper {
  position: relative;
  padding-bottom: 56,25%;
  overflow: hidden;
  width: 100% !important;
  height: 0 !important;
}

.video-wrapper iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

この JS スニペットとともに

    // get all video wrappers
    var videoWrappers = document.getElementsByClassName('video-wrapper');
    // loop over each of them
    [].forEach.call( videoWrappers, function (el, i) {
        // cache width and height values of the iframe
        var width = el.getElementsByTagName('iframe')[0].width,
            height = el.getElementsByTagName('iframe')[0].height;
        // apply the padding to the video wrapper
        el.style.paddingBottom = height / width * 100 + '%';
    });

投稿タイプがビデオの場合、これは正常に機能しますが、ビデオが標準のテキスト投稿に埋め込まれている場合、ビデオはレスポンシブではなくなります (実際の動作については、 blog.paulyb.meを参照してください)。

これを修正するためにコードを適応させる方法を見つけようとしていますが、何か提案はありますか?

4

2 に答える 2

0

テキスト投稿のビデオにレスポンシブ iframe を配置する上記の提案に近づきましたが、ビデオ自体はフレームに合わせてスムーズにサイズ変更されませんでした。色々と遊んだ後、私が必要としているものを正確に実行する fitvids.js に出会いました。

fitvids.js

于 2015-11-16T22:12:54.930 に答える
0

ほとんどの場合、ビデオ投稿の HTML が次のようなものであるため、この問題が発生しています。

{block:Video}

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

{/block:Video}

これはビデオ投稿にのみ影響します。

修正; HTML のテキスト投稿の本文にインライン ビデオを配置することはできませんがDIV、テキスト投稿の本文の周りに配置することはできます。

{block:Text}

{block:Title} <div class="text_title"> {Title} </div> {/block:Title}
<div class="text_body">
{Body}
</div>

{/block:Text}

iframeこれで、スクリプトを使用して内の特定の s を取得することもできます.text_body。

ノート：

querySelectorAll代わりに を使用して、 iframes を取得できるようになりました。document.querySelctorAll(".video-wrapper iframe, .text_body iframe#youtube_iframe").

必要に応じて、ユニットをレイアウトに使用してみると、vwCSS だけでこのようなことを簡単に処理できます。たとえば、ビデオが50vwにある場合、ビデオを16:9 の比率にwidth設定できます。height28.125vw

アップデート：

あなたはそれを機能させることができず、あなたが試したコードを投稿しなかったので、実際に理由を答えることはできませんが、スクリプトは次のようになります (height代わりに を設定しているので、CSS で多くの作業を行う必要はありません) ):

var wrap = document.querySelctorAll(".video-wrapper iframe, .text_body iframe#youtube_iframe"), i;

for (i = 0; i < wrap.length; i += 1) {
    wrap[i].style.height = wrap[i].clientWidth * 0.5625 + 'px';
}

これを試すときは、問題の CSS を変更することを忘れないでください。ほとんどの CSS は必要ありません。

試す！そして私に知らせてください！

于 2015-11-09T03:30:41.613 に答える