Vimeo/Youtube播放Jquery.click（）函数。。。我不知道'；我甚至不知道这个问题怎么说

这很复杂。让我们从我正在做的事情开始

我正在使用Jquery插件(http://desandro.com/demo/masonry/docs/basic-single-column.html)要对齐各种div（.box）。我使用一个脚本将div“.box”从原来的200px宽度扩展到400px宽度。再次单击时，.box将折叠。这一切都很好。查看我在这里做的事情：

我想做的也是显示视频。从YouTube或Vimeo（首选）嵌入它们。我可以将Vimeo视频中的嵌入代码添加到.box中，并使用以下Jquery代码调整其大小：

$('.video').css({
    width: '100%',
    height: 'auto'
});

HTML将如下所示：

<div class="box" id="videoBox">
<iframe src="http://player.vimeo.com/video/16916715?title=0&amp;byline=0&amp;portrait=0&amp;color=ffffff" width="400" height="225" frameborder="0" class="video"></iframe>
</div>

我在嵌入代码中添加了一个类“video”。这会将视频大小调整到正确的尺寸，宽度为200px，高度为所需的高度。您可以在此处查看它的外观：http://jsfiddle.net/ryanjay/P3RBx/

现在这个问题变得复杂了，我甚至不知道从哪里开始做这件事，或者这是否可能。当点击视频时，我希望它能自动扩展到400px的宽度和所需的高度，然后开始播放，或者用户可以点击播放

我的想法是只制作一个视频图像，然后当点击该框时，它会隐藏图像，调整框的大小，然后显示视频，但我甚至遇到了问题

上帝，我希望这一切都有意义，我希望有人能帮助我。哈想到如何解决这个问题，我的头都快融化了。如果有人认为他们有一个答案，我会喜欢它，如果你能把它放到一个JSFIDLE文档中，并显示整个代码。我在添加新代码时很糟糕，要达到这一点需要花费很长时间。我对这一切都是新手，正在慢慢地学习

---

谢谢

我已经编写了一个脚本，可以获得播放vimeo视频所需的数据 以下是工作模型的链接：

我曾处理过一个类似但不相同的需求。Vimeo有一个API，它使用视频ID向您提供所有详细信息7100569是我想要获取信息的视频的视频ID。作为JSONP返回的信息本身包含播放器的url

  $.ajax({
        url: 'http://www.vimeo.com/api/v2/video/7100569.json?callback=?',
        type: 'POST',
        cache: false,
        dataType: 'json',
        data: {
            url: url
        },
        success: function(data) {
            loadVimeoVideo(data, 'http://vimeo.com/api/oembed.json?url=' + url + '&callback=?')
        }
    })

使用从第一个请求中获得的数据：其中videoUrl始终采用相同的形式，playerUrl是从第一次调用中获得的数据。此调用获取播放器本身作为iframe的详细信息

function loadVimeoPlayer(videoUrl, playerUrl) {
    $.ajax({
        url: playerUrl,
        data: {
            url: videoUrl
        },
        type: 'POST',
        dataType: 'json',
        success: function(data) {
            var video = GetJson(data);
            if (!video || video == '') {
                $.Flash('error', 'The video could not be loaded. Please check the URL and the permissions, only Public videos can be added.');
                return;
            }
            var title = video.title;
            var author = video.author_name;
            var authorUrl = video.author_url;
            var htmlFrame = video.html;
            var width = video.width;
            var height = video.height;
            var duration = video.duration;
            var description = video.description;
            var thumbnailUrl = video.thumbnail_url;
            var thumbNailWidth = video.thumbnail_width;
            var thumbNailHeight = video.thumbnail_height;
            var videoId = video.video_id;
            var upload_date = video.upload_date;
            $('#player').html(htmlFrame);

        }
    });
}