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嵌入視頻

回答

相關問題