Example with problem
<div id="fb-root"></div>To display the facebook video with 100% width. By referenced from at stackoverflow i changed the syntax data-width="100%" to data-adapt-container-width="true" and it work like a charm:
<script>(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/zh_TW/sdk.js#xfbml=1&version=v2.8";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div data-href="https://www.facebook.com/fbstart/videos/1305528069537541" class="fb-video" data-allowfullscreen="true" data-width="100%"></div>
Amended example
<div id="fb-root"></div>
<script>(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/zh_TW/sdk.js#xfbml=1&version=v2.8";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div data-href="https://www.facebook.com/fbstart/videos/1305528069537541" class="fb-video" data-allowfullscreen="true" data-adapt-container-width="true"></div>
Reference
http://stackoverflow.com/questions/29429296/responsive-width-facebook-page-pluginhttps://developers.facebook.com/docs/plugins/embedded-video-player
No comments :
Post a Comment