jquery - 根据我的需要自定义 jquery-oembed-all

Question

我在我的页面中为 youtube/vimeo 视频使用 jquery-oembed-all。它比我需要的尺寸稍大或更大。我尝试更改持有 a 的 class 的 css 属性，但它没有用。虽然我可以通过在 css 中选择 iframe 来更改 iframe 的高度和宽度。但是播放器不会缩小。还有一个向上和向下箭头标志来隐藏/取消隐藏 iframe 播放器，我不想在我的页面中使用它。如何根据我的需要自定义 jquery-oembed-all？

或者还有其他替代方法可以实现这一目标吗？

任何帮助将不胜感激。谢谢!

html:

<div id="videos">
        <div id="video_wrapper">
            <div class="video_container">
                <a href="http://www.youtube.com/watch?v=hWnAqFyaQ5s" class="embed" class="video"></a>
                <p><a href="">This is the title</a></p>
                <p>2 days ago</p>
            </div>
            <div class="video_container">
                <a href="http://vimeo.com/86290699" class="embed video"></a>
                <p><a href="">This is the title</a></p>
                <p>2 days ago</p>
            </div>
        <div class="clear_left"></div>
        </div>
</div>

CSS:

#videos #video_wrapper .video_container .video {
    width: 180px;
}

Answer 1

当您在 .js 文件中调用 oembed() 方法时，您可以指定一些设置。这里有一些默认设置:

$.fn.oembed.defaults = {
    maxWidth: null,
    maxHeight: null,
    includeHandle: true,
    embedMethod: 'auto',
    // "auto", "append", "fill"     
    onProviderNotFound: function() {},
    beforeEmbed: function() {},
    afterEmbed: function() {},
    onEmbed: false,
    onError: function() {},
    ajaxOptions: {}
};

如您所见，我们可以指定 ma​​xWidth，因此您的代码如下所示:

$('a.embed').oembed(null,{
   maxWidth: 180
});