Geek asks and answers

Vimeo / Youtube Function JQuery.click () ... I don’t even know how to formulate this question

It's complicated. Let's start with what I'm doing.

I use the Masonry JQuery Plugin (http://desandro.com/demo/masonry/docs/basic-single-column.html) to align the various divs (.box). I am using a script that extends div.box from the original width of 200px to 400px in width. Pressing again crashes .box. It all works great. See what I'm doing here: http://jsfiddle.net/ryanjay/fgNMJ/

What I want to do is also display the video. Paste them either from YouTube or from Vimeo (preference). I can add the embed code from the Vimeo video to .box and resize it using this jQuery code:

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

HTML will look like this:

<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>

"" . 200 , - . , : http://jsfiddle.net/ryanjay/P3RBx/

, , , , . , , 400 , - , , , .

, , , , , , .

, , , , - . . , , . - , , , jsFiddle . , , . , !

+3
1

script, , Vimeo : http://jsfiddle.net/frictionless/UkNvM/2/

, . Vimeo API, , videoID. 7100569 - , . , 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 http://vimeo.com/XXXX, 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);

        }
    });
}
+1

More articles:


All Articles