Question

我需要让facebook视频嵌入响应，因为facebook有一个“固定”大小，但它不适应屏幕的大小。

当我在facebook的宽度上放置“auto”时，根据视频，它的高度远远大于正常值，如下图所示（离开高度为1100，正常值为770）

https://developers.facebook.com/docs/plugins/embedded-video-player/?prefill_href=https%3A%2F%2Fwww.facebook.com%2Frobertdowneyjr%2Fvideos%2F665148873653581%2F#configurator

由于会包含多个不同尺寸的视频，因此无法在某些外部div上留下固定尺寸。

Answer 1

在视频中添加容器Div：

HTML

<div class="facebook-responsive">
    <iframe src="https://www.facebook.com/plugins/videosource" width="560" height="315" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allowFullScreen="true"></iframe>
</div>

CSS

.facebook-responsive {
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
}
.facebook-responsive iframe {
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}

使用div周围的容器来控制它的最大宽度，并将iframe的高度和宽度设置为100％。

Answer 2

在视频周围添加一个容器Div：

HTML

<div class="facebook-responsive">
    <iframe src="https://www.facebook.com/plugins/videosource" width="560" height="315" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allowFullScreen="true"></iframe>
</div>

JS

function resizeFacebookVideos() {
    var ths = $('.facebook-responsive');

    var containerWidth = ths.width();
    var iframeOldWidth = $(ths).find("iframe").width();
    var iframeOldHeight = $(ths).find("iframe").height();

    $(ths).find("iframe").attr("width", containerWidth);
    $(ths).find("iframe").attr("height", iframeOldHeight * (containerWidth / iframeOldWidth));
}

$(document).ready(function () {
    resizeFacebookVideos();
});

$(window).resize(resizeFacebookVideos);

Answer 3

现在，Facebook支持嵌入响应视频

<script async defer src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.2"></script>
<div class="fb-video"
    data-href="https://www.facebook.com/watch/?v=10155278547321729"
    data-width="auto"
    data-show-captions="false">
</div>

Answer 4

首先，在视频周围添加容器Div：

视频

1-您可以使用媒体查询

@media (max-width: 979px) and (min-width: 768px) {
  .videoResponsive {
    height: whatever;
  }
}

2-你可以使用javascript

$(window).resize(function(){
  winWidth = $(window).width();
  $(".videoResponsive").width(winWidth*0.5);
});

Answer 5

这就是我发现的工作-尤其是当我想为更大的屏幕并排放置两个视频时，使用CSS底部CSS会导致计算错误。

简单地调整视频大小似乎容易得多：

function resizeVideos() {
  var aspectRatio = .5625;   
  var containerWidth = jQuery(".facebook-responsive").width();
  $(".facebook-responsive iframe").attr("width", containerWidth);
  $(".facebook-responsive").height(containerWidth * aspectRatio);
};

$(document).ready(function() {
  resizeVideos();
});

$(window).resize(resizeVideos);

我确实尝试使用Facebook SDK方法，并且视频在没有这些更改的情况下似乎可以正确调整，但是加载时间非常缓慢（至少10秒），以至于仍然可以使用iFrame。

Answer 6

我通常不推荐服务，但是我已经尽一切努力使它们正常工作，并且每一个都存在大小确定或丢失下面的措辞的问题。我用这个代替。 https://iframely.com/domains/facebook它始终如一。

Answer 7

您的嵌入式代码如下：

 $data = $form->getData();
 var_dump($data);


output : 
["tgg"]=>
  bool(false)
["selection"]=>
  bool(true) if checked

return a boolean!!!

第1步：：修改嵌入代码：用div标签包裹嵌入代码

<iframe src="/" width="734" height="824" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allowFullScreen="true"></iframe>

第2步：在样式表文件中添加CSS

<div class="facebook-responsive">
    <iframe src="/" width="734" height="824" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allowFullScreen="true"></iframe>
</div>

Answer 8

您是否尝试过Facebook自身的SDK脚本？您可以与代码集成并添加嵌入的自定义。配置完成后，您可以复制生成的代码并添加到您的网站，它将是这样的：

<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId      : 'your-app-id',
      xfbml      : true,
      version    : 'v2.8'
    });
    FB.AppEvents.logPageView();
  };

  (function(d, s, id){
     var js, fjs = d.getElementsByTagName(s)[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement(s); js.id = id;
     js.src = "//connect.facebook.net/en_US/sdk.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
</script>

响应的facebook嵌入视频

8 个答案: