test2
class FacebookLiveEmbed {
constructor(options = {}) {
this.containerId = options.containerId || 'fb-live-container';
this.videoUrl = options.videoUrl || '';
this.width = options.width || '100%';
this.aspectRatio = options.aspectRatio || 16/9;
this.autoplay = options.autoplay || true;
this.init();
}
init() {
// Load Facebook SDK
if (!document.getElementById('facebook-jssdk')) {
const js = document.createElement('script');
js.id = 'facebook-jssdk';
js.src = "https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v12.0";
document.body.appendChild(js);
}
this.createStyles();
this.createContainer();
this.handleResize();
// Resize handler
window.addEventListener('resize', () => this.handleResize());
}
createStyles() {
const styles = `
.fb-live-wrapper {
position: relative;
width: ${this.width};
height: 0;
overflow: hidden;
background: #f1f1f1;
margin: 0 auto;
}
.fb-live-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
}
.fb-loading {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #666;
}
@media (max-width: 768px) {
.fb-live-wrapper {
width: 100%;
}
}
`;
const styleSheet = document.createElement('style');
styleSheet.textContent = styles;
document.head.appendChild(styleSheet);
}
createContainer() {
const container = document.getElementById(this.containerId);
if (!container) return;
const wrapper = document.createElement('div');
wrapper.className = 'fb-live-wrapper';
// Loading indicator
const loading = document.createElement('div');
loading.className = 'fb-loading';
loading.textContent = 'Loading livestream...';
// Facebook video embed
const fbWrapper = document.createElement('div');
fbWrapper.className = 'fb-video';
fbWrapper.setAttribute('data-href', this.videoUrl);
fbWrapper.setAttribute('data-show-text', 'false');
fbWrapper.setAttribute('data-width', 'auto');
if (this.autoplay) {
fbWrapper.setAttribute('data-autoplay', 'true');
}
wrapper.appendChild(loading);
wrapper.appendChild(fbWrapper);
container.appendChild(wrapper);
}
handleResize() {
const wrapper = document.querySelector('.fb-live-wrapper');
if (wrapper) {
const width = wrapper.offsetWidth;
const height = width / this.aspectRatio;
wrapper.style.paddingBottom = `${(height / width) * 100}%`;
}
}
// Method để update video URL
updateVideo(newUrl) {
this.videoUrl = newUrl;
const container = document.getElementById(this.containerId);
if (container) {
container.innerHTML = '';
this.createContainer();
if (window.FB) {
window.FB.XFBML.parse();
}
}
}
}
// Sử dụng:
const fbLive = new FacebookLiveEmbed({
containerId: 'fb-live-container',
videoUrl: 'https://www.facebook.com/facebook/videos/YOUR_VIDEO_ID',
width: '100%',
aspectRatio: 16/9,
autoplay: true
});
// Để update video mới:
// fbLive.updateVideo('https://www.facebook.com/facebook/videos/NEW_VIDEO_ID');