Responsive Facebook嵌入视频
问题描述:
我需要制作一个Facebook视频嵌入响应,因为Facebook有一个“固定”的大小,但它不适应屏幕的大小。Responsive Facebook嵌入视频
当我把“自动”中的Facebook的宽度,取决于视频它留下如下面所示的高度比正常大的多,(离开高度在1100,作为正常的是770)
由于将包含多个不同尺寸的视频,因此无法在某些外部div上留下固定尺寸。
答
有你尝试了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>
答
添加一个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%。
答
首先,添加一个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);
});
您可以添加自定义类到视频! - 在这里查看文档:https://developers.facebook.com/docs/plugins/embedded-video-player他们给你如何定制嵌入式视频的示例。 –
@NiallMaher如何做到这一点?您可以将类添加到包装div,但不能添加到视频本身。你只能设置宽度属性,但没有多大帮助。 –