通过 ajax 嵌入 Facebook 视频 - 调整大小问题

Question

对于视频库，我使用 AJAX 从不同的视频主机（如 FB、Youtube、Vimeo 等）加载视频。我正在嵌入 FB 视频，如 https://developers.facebook.com/docs/plugins/embedded-video-player 中所述使用 FB 的 JS SDK。

问题是，当我通过 AJAX 请求 FB 视频时，视频正在调整到较小的尺寸，如下所示：

页面完全重新加载时没有问题（没有 AJAX）。

JS 片段：

$.ajax({
                url: "index.php?gallery&type=fbVideoCode&url=" + url,
                success: function(response) {
                    response = $.trim(response);
                    $('span.carousel').replaceWith(response);
                    FB.XFBML.parse(); // To re-parse all FB videos on the page
                }
            });

请帮忙。

提前致谢。

Answer 1

这将使 Youtube 和 Vimeo 中的所有视频响应：

// Find all YouTube videos
            var $allVideos = $("iframe[src^='//player.vimeo.com'], iframe[src^='//www.youtube.com']"),

    // The element that is fluid width
    $fluidEl = $("body");

// Figure out and save aspect ratio for each video
$allVideos.each(function() {

    $(this)
    .data('aspectRatio', this.height / this.width)

    // and remove the hard coded width/height
    .removeAttr('height')
    .removeAttr('width');

});

// When the window is resized
$(window).resize(function() {

    var newWidth = $fluidEl.width();

  // Resize all videos according to their own aspect ratio
  $allVideos.each(function() {

    var $el = $(this);
    $el
    .width(newWidth)
    .height(newWidth * $el.data('aspectRatio'));

  });

// Kick off one resize to fix all videos on page load
}).resize();

取自Chris Coyiers tutorial

Answer 2

问题出在我使用的 CSS 旋转木马上。

为其他人发布 FB 视频代码:-)

PHP:（用于 AJAX 请求）

function getFBEmbedPlayer($video_id, $width = 600) {
        return "<div class=\"fb-video\" data-href=\"https://www.facebook.com/video.php?v=$video_id\" data-width=\"$width\">
    <div class = \"fb-xfbml-parse-ignore\"></div></div>";
    }

JS:

按照https://developers.facebook.com/docs/plugins/embedded-video-player

中的说明进行操作

通过 ajax 嵌入 Facebook 视频 - 调整大小问题

Embed Facebook video via ajax - Resize Issue

javascript

ajax

video

jquery

facebook