Tumblr託管的視頻流體寬度和高度

我想製作一個Tumblr主題，可以選擇不同的帖子寬度，因此設置視頻文章相當困難。Tumblr託管的視頻流體寬度和高度

此代碼：

.video-container { 
    position: relative; 
    padding-bottom: 56.25%; 
    padding-top: 30px; 
    height: 0; 
    overflow: hidden; 
} 

.video-container iframe, 
.video-container object, 
.video-container embed { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
}

和

{block:Video} 
<div class="video-container"> 
{Video-500} 
</div> 
{block:Caption} 
{Caption} 
{/block:Caption} 
{/block:Video}

與YouTube視頻完美的作品，但它修剪下來的tumblr代管的影片。最新的默認Tumblr主題Optica有東西，使這項工作，這意味着Tumblr託管的視頻保持原來的高度，但我不知道什麼...任何人都可以幫助這個嗎？不一定是在Optica主題中的相同方式，只是...任何方式？

來源

2013-12-23 MSmS

不幸的是，Tumblr似乎沒有遵循特定的寬高比來播放其視頻，這與Youtube不同。

padding-bottom: 56.25%給出16：9的縱橫比（http://css-tricks.com/fluid-width-youtube-videos/）。

每個Tumblr視頻可能有不同的寬高比，所以每個人都需要不同的padding-bottom值。

簡單的解決辦法是使用fitVids.js：

jQuery的版本：http://fitvidsjs.com/

的JavaScript版本：https://github.com/rosszurowski/vanilla-fitvids

你可以滾你自己的，任一版本的源解釋得很好計算需要什麼。

啓用與Fitvids.js

的tumblr影片的src是由影片的tumblr主機有點不同。他們做了一些JavaScript的魔術。

$(".videos").fitVids({ customSelector: "iframe[src='about:blank']"});

來源

2013-12-24 09:59:52 mikedidthis

我知道，其實，我試圖fitVids但沒有工作，因爲我無法找到一個方法，使之適用於的tumblr託管的視頻了。我試着把它加到腳本中： ''iframe [src * ='tumblr.com']「，' and this too： '$（」＃videos「）。fitVids（{customSelector：」iframe [src * ='tumblr.com']「}）;' – MSmS

Urm ok，我只是想幫忙。我已經用自定義選擇器更新了答案。 – mikedidthis

對不起，如果我冒犯了你的幫助，並且毫不理解，我不是故意的，這一直在困擾着我幾天，我感到沮喪。無論如何，我試過'$（「。videos」）。fitVids（{customSelector：「iframe [src * ='about：blank']」}）;'但它實際上只是讓Tumblr託管的視頻根本不顯示.. – MSmS

Tumblr託管的視頻流體寬度和高度

回答

相關問題