Responsive Facebook嵌入视频

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

当我把“自动”中的Facebook的宽度，取决于视频它留下如下面所示的高度比正常大的多，（离开高度在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上留下固定尺寸。

来源

2017-02-16 André Bisewski

您可以添加自定义类到视频！ - 在这里查看文档：https：//developers.facebook.com/docs/plugins/embedded-video-player他们给你如何定制嵌入式视频的示例。 –

@NiallMaher如何做到这一点？您可以将类添加到包装div，但不能添加到视频本身。你只能设置宽度属性，但没有多大帮助。 –

-1

有你尝试了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>

来源

2017-02-16 20:20:32

添加一个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％。

来源

2017-02-16 03:13:50

首先，添加一个div容器周围的视频：

视频

1 - 您可以使用mediaqueries

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

2 - 您可以使用JavaScript

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

来源

2017-02-16 03:30:42 314159265358979323846264338327

Responsive Facebook嵌入视频

回答

相关问题