tumblr 上的 vimeo 宽度答案

【问题标题】：vimeo width on tumblrtumblr 上的 vimeo 宽度
【发布时间】：2011-06-14 16:47:35
【问题描述】：

知道问题 tumblr 将视频的宽度限制为最大 500，我希望它们为 700。我已经尝试了所有列出的黑客和脚本，它们不适用于我的theme。有什么建议？

【问题讨论】：

【解决方案1】：

这段代码是一个有用的起点，但它也没有调整嵌入标签的大小，这意味着它不适用于所有浏览器。

<script type="text/javascript">
    $(document).ready(function() {
          var embedTag;
          $('.video').each(function(index) {
               $( this ).contents().each( function ( index ) {
                    if ($(this).is('object') || $(this).is('embed') || $(this).is('iframe')) {
                         var orgWidth = $(this).attr('width');
                         var orgHeight = $(this).attr('height');
                         var scale = orgHeight/orgWidth;
                         var targetWidth = 474;
                         var targetHeight = targetWidth * scale;
                         $(this).attr('width', targetWidth);
                         $(this).attr('height', targetHeight);
                         $(this).find('embed').attr('width', targetWidth);
                         $(this).find('embed').attr('height', targetHeight);
                    }
               });
          });
     });
    </script>

编辑：进一步修订，以防您的视频/媒体，无论嵌入在其他元素中：

<script type="text/javascript">
    $(document).ready(function() {
          var embedTag;
          $('.video, .media').each(function(index) {
               $( this ).find('object, embed, iframe').each( function ( index ) {
                    var orgWidth = $(this).attr('width');
                    var orgHeight = $(this).attr('height');
                    var scale = orgHeight/orgWidth;
                    var targetWidth = 474;
                    var targetHeight = targetWidth * scale;
                    $(this).attr('width', targetWidth);
                    $(this).attr('height', targetHeight);
                    $(this).find('embed').attr('width', targetWidth);
                    $(this).find('embed').attr('height', targetHeight);
               });
          });
     });
    </script>

【讨论】：

【解决方案2】：

我必须对我为 Tumblr (ridiculouslyawesome.com) 设计/开发的主题做同样的事情。为了绕过 Tumblr 似乎强加的 500px 最大宽度，我想出了一个小 javascript hack，它可以找到页面中的所有 object/embed/iframe 标签，并根据主题适当调整它们的大小。此示例使用 jQuery，但您可以将其更改为您喜欢使用的任何 JS 框架。

$(document).ready(function() {
      var embedTag;
      $('div.video_container').each(function(index) {
           $( this ).contents().each( function ( index ) {
                if ($(this).is('object') || $(this).is('embed') || $(this).is('iframe')) {
                     var orgWidth = $(this).attr('width');
                     var orgHeight = $(this).attr('height');
                     var scale = orgHeight/orgWidth;
                     var targetWidth = 960;
                     var targetHeight = targetWidth * scale;
                     $(this).attr('width', targetWidth);
                     $(this).attr('height', targetHeight);
                }
           });
      });
 });

到目前为止，在我测试过的所有浏览器中，这对我的主题都非常有效。希望它也对你有用。如果您遇到任何问题，请告诉我。

瑞恩

【讨论】：

吉普车。找了好久的解决办法！！谢谢瑞恩 - 非常感谢！