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托管的视频流体宽度和高度

回答

相关问题