Skip to content

Instantly share code, notes, and snippets.

@ykob

ykob/BgYoutube.js

Last active February 20, 2018 08:59
Show Gist options
  • Save ykob/c864a0bd229fd674b331411c045e6cd6 to your computer and use it in GitHub Desktop.
Save ykob/c864a0bd229fd674b331411c045e6cd6 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. ykob revised this gist Feb 20, 2018. 2 changed files with 70 additions and 69 deletions.
    70 changes: 70 additions & 0 deletions BgYoutube.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,70 @@
    export default class BgYoutube {
    constructor(videoId, playerId, width, height, resolution) {
    this.playerId = playerId;
    this.width = width;
    this.height = height;
    this.player = null;

    this.initPlayer(videoId, playerId);
    this.setFullScreen(resolution);
    }
    initPlayer(videoId, playerId) {
    const onYouTubeIframeAPIReady = () => {
    return new YT.Player(playerId, {
    width: this.width,
    height: this.height,
    videoId: videoId,
    playerVars: {
    controls: 0,
    loop: 1,
    modestbranding: 1,
    playlist: videoId,
    playsinline: 1,
    rel: 0,
    showinfo: 0,
    },
    events: {
    'onReady': onPlayerReady,
    }
    });
    }
    if (typeof(YT) == 'undefined' || typeof(YT.Player) == 'undefined') {
    var tag = document.createElement('script');
    tag.src = "https://www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
    window.onYouTubePlayerAPIReady = () => {
    this.player = onYouTubeIframeAPIReady();
    };
    } else {
    this.player = onYouTubeIframeAPIReady();
    }
    const onPlayerReady = () => {
    this.player.mute();
    this.player.playVideo();
    }
    }
    setFullScreen(resolution) {
    const elm = document.getElementById(this.playerId);
    let resizeW = 0;
    let resizeH = 0;
    let margin = [];
    if (resolution.x / resolution.y > this.width / this.height) {
    resizeW = resolution.x;
    resizeH = this.height * (resolution.x / this.width);
    let over = (resolution.y - resizeH) / 2;
    margin = [over, 0, over, 0];
    } else {
    resizeW = this.width * (resolution.y / this.height);
    resizeH = resolution.y;
    let over = (resolution.x - resizeW) / 2;
    margin = [0, over, 0, over];
    }
    elm.style.width = `${resizeW}px`;
    elm.style.height = `${resizeH}px`;
    elm.style.marginTop = `${margin[0]}px`;
    elm.style.marginRight = `${margin[1]}px`;
    elm.style.marginBottom = `${margin[2]}px`;
    elm.style.marginLeft = `${margin[3]}px`;
    }
    }
    69 changes: 0 additions & 69 deletions background_youtube.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,69 +0,0 @@
    export default class BackgroundYoutube {
    constructor(video_id, player_id, width, height) {
    this.player_id = player_id;
    this.width = width;
    this.height = height;
    this.initPlayer(video_id, player_id);
    this.setFullScreen();
    }
    initPlayer(video_id, player_id) {
    const onYouTubeIframeAPIReady = () => {
    return new YT.Player(player_id, {
    width: this.width,
    height: this.height,
    videoId: video_id,
    playerVars: {
    autoplay: 1,
    controls: 0,
    loop: 1,
    playlist: video_id,
    rel: 0,
    showinfo: 0
    },
    events: {
    'onReady': onPlayerReady,
    }
    });
    }
    let player = null;
    if (typeof(YT) == 'undefined' || typeof(YT.Player) == 'undefined') {
    var tag = document.createElement('script');
    tag.src = "https://www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
    window.onYouTubePlayerAPIReady = function() {
    player = onYouTubeIframeAPIReady();
    };
    } else {
    player = onYouTubeIframeAPIReady();
    }
    function onPlayerReady(event) {
    event.target.playVideo();
    event.target.mute();
    }
    }
    setFullScreen() {
    let resize_width = 0;
    let resize_height = 0;
    let margin = [];
    if (window.innerWidth / window.innerHeight > this.width / this.height) {
    resize_width = window.innerWidth;
    resize_height = this.height * (window.innerWidth / this.width);
    let over = (window.innerHeight - resize_height) / 2;
    margin = [over, 0, over, 0];
    } else {
    resize_width = this.width * (window.innerHeight / this.height);
    resize_height = window.innerHeight;
    let over = (window.innerWidth - resize_width) / 2;
    margin = [0, over, 0, over];
    }
    $(`#${this.player_id}`).css({
    width: resize_width,
    height: resize_height,
    marginTop: margin[0],
    marginRight: margin[1],
    marginBottom: margin[2],
    marginLeft: margin[3],
    });
    }
    }
  2. ykob created this gist Jul 5, 2016.
    69 changes: 69 additions & 0 deletions background_youtube.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,69 @@
    export default class BackgroundYoutube {
    constructor(video_id, player_id, width, height) {
    this.player_id = player_id;
    this.width = width;
    this.height = height;
    this.initPlayer(video_id, player_id);
    this.setFullScreen();
    }
    initPlayer(video_id, player_id) {
    const onYouTubeIframeAPIReady = () => {
    return new YT.Player(player_id, {
    width: this.width,
    height: this.height,
    videoId: video_id,
    playerVars: {
    autoplay: 1,
    controls: 0,
    loop: 1,
    playlist: video_id,
    rel: 0,
    showinfo: 0
    },
    events: {
    'onReady': onPlayerReady,
    }
    });
    }
    let player = null;
    if (typeof(YT) == 'undefined' || typeof(YT.Player) == 'undefined') {
    var tag = document.createElement('script');
    tag.src = "https://www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
    window.onYouTubePlayerAPIReady = function() {
    player = onYouTubeIframeAPIReady();
    };
    } else {
    player = onYouTubeIframeAPIReady();
    }
    function onPlayerReady(event) {
    event.target.playVideo();
    event.target.mute();
    }
    }
    setFullScreen() {
    let resize_width = 0;
    let resize_height = 0;
    let margin = [];
    if (window.innerWidth / window.innerHeight > this.width / this.height) {
    resize_width = window.innerWidth;
    resize_height = this.height * (window.innerWidth / this.width);
    let over = (window.innerHeight - resize_height) / 2;
    margin = [over, 0, over, 0];
    } else {
    resize_width = this.width * (window.innerHeight / this.height);
    resize_height = window.innerHeight;
    let over = (window.innerWidth - resize_width) / 2;
    margin = [0, over, 0, over];
    }
    $(`#${this.player_id}`).css({
    width: resize_width,
    height: resize_height,
    marginTop: margin[0],
    marginRight: margin[1],
    marginBottom: margin[2],
    marginLeft: margin[3],
    });
    }
    }