├── transparent.theme.css
├── README.md
└── videoBackground.plugin.js


/transparent.theme.css:
--------------------------------------------------------------------------------
 1 | /**
 2 | * @name Transparency for Video Background
 3 | * @version 1.0
 4 | * @description Transparency for Video Background
 5 | * @source https://github.com/Fuguu/videoBackground
 6 | * @authorId 83151710654038016
 7 | * @author Fugu
 8 | **/
 9 | 
10 | .theme-dark{
11 |     /*change last value from 0.0-1.0 to adjust brightness*/
12 |   --background-tertiary: rgba(25, 25, 25, 0.70); 
13 |   --background-primary: transparent;
14 |   --background-secondary: transparent;
15 |   --background-secondary-alt: transparent;
16 |   --channeltextarea-background: transparent;
17 |   }
18 |   
19 |   
20 |   .wrapper-3NnKdC,
21 |   .scroller-1Bvpku,
22 |   .app-2rEoOp,
23 |   .theme-dark .container-1D34oG{
24 |     background: transparent;
25 |   }
26 |   
27 |   
28 |   .fullscreen-bg video,
29 |   .fullscreen-bg-video{
30 |     position: fixed;
31 |     top: 50%; left: 50%;
32 |     z-index: -100;
33 |     min-width: 100%;
34 |     min-height: 100%;
35 |     width: auto;
36 |     height: auto;
37 |     transform: translate(-50%, -50%);
38 |   }
39 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Video Background for BetterDiscord
 2 | NOTE: I've only tested this on Windows.
 3 | 
 4 | This is a guide to using the plugin. When working, it will insert a `<video>` or `<iframe>` element after `<app-mount>` which requires some css to make visible. I have provided a sample css theme that will do so. Currently there are no controls for the video, might add it sometime in the future.
 5 | 
 6 | Example: 
 7 | 
 8 | ![](https://thumbs.gfycat.com/ClumsyGreenHookersealion-size_restricted.gif)
 9 | 
10 | # Install
11 | Download [`videoBackground.plugin.js`](https://raw.githubusercontent.com/Fuguu/videoBackground/master/videoBackground.plugin.js) (can right click this link and save as) and drop it in the BetterDiscord plugin folder. 
12 | 
13 | This can be found in:
14 | + `Discord settings > BetterDiscord > Plugins > 'Open Plugin Folder'`
15 | + `C:\Users\{name}\AppData\Roaming\BetterDiscord\plugins`
16 | 
17 | Restart discord and it should show up like so:
18 | 
19 | ![](https://i.imgur.com/vu7VUfv.png)
20 | 
21 | Include the following code to your css for the video element (this is included in the sample theme):
22 | ```css
23 | .fullscreen-bg video,
24 | .fullscreen-bg-video{
25 |   position: fixed;
26 |   top: 50%; left: 50%;
27 |   z-index: -100;
28 |   min-width: 100%;
29 |   min-height: 100%;
30 |   width: auto;
31 |   height: auto;
32 |   transform: translate(-50%, -50%);
33 | }
34 | ```
35 | 
36 | If you use a custom theme already, just include the [`sample css`](https://raw.githubusercontent.com/Fuguu/videoBackground/master/transparent.theme.css) at the end of your custom css or add to themes folder. It will make all the backgrounds transparent.
37 | 
38 | # Setting up Video
39 | Clicking on the `Settings` button will open a window like so:
40 | 
41 | ![](https://i.imgur.com/e8gqMNK.png)
42 | 
43 | 
44 | Links that can be used (use full link and not the shorten one):
45 | 
46 | 
47 | Youtube video: `https://www.youtube.com/watch?v=9sgTdjmTiL4`
48 | 
49 | 
50 | Youtube playlist: `https://www.youtube.com/playlist?list=PLgA8PQBu3V3abH0MbSslHCeVToaa9keLE`
51 | 
52 | 
53 | Direct link to any `MP4/WebM/OGG` file: `https://giant.gfycat.com/TenderAgileAsiaticlesserfreshwaterclam.webm`
54 | 
55 | 
56 | Direct links work with websites such as Streamable and Gfycat. The link must also be https:// or the video will not play. It will autosave and update the video when link is added.
57 | 
58 | # Getting Direct Link
59 | <h4>Streamable</h4>
60 | 
61 | On any streamable video, you can right click the video to pop up a menu which you can again right click on `Download Video` and copy the link address like so:
62 | 
63 | ![](https://i.imgur.com/SsxNFXV.png)
64 | 
65 | <h4>Gfycat</h4>
66 | 
67 | In a similar fashion to Streamable, you can right click a gfycat video and copy the link address:
68 | 
69 | ![](https://i.imgur.com/BPzKJMM.png)
70 | 
71 | 


--------------------------------------------------------------------------------
/videoBackground.plugin.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * @name VideoBackground
  3 |  * @author Fuguu
  4 |  * @authorId 83151710654038016
  5 |  * @version 3.0
  6 |  * @description Live Video Background!
  7 |  * @source https://github.com/Fuguu/videoBackground
  8 |  */
  9 | 
 10 | module.exports = (_ => {
 11 |   const config = {
 12 |     "info": {
 13 |       "name": "VideoBackground",
 14 |       "author": "Fugu",
 15 |       "version": "3.0",
 16 |       "description": "Set your Discord background as a video! CSS is required, example can be found at website linked below"
 17 |     }
 18 |   };
 19 |   return !window.BDFDB_Global || (!window.BDFDB_Global.loaded && !window.BDFDB_Global.started) ? class {
 20 |     getName() { return config.info.name; }
 21 |     getAuthor() { return config.info.author; }
 22 |     getVersion() { return config.info.version; }
 23 |     getDescription() { return config.info.description; }
 24 | 
 25 |     downloadLibrary() {
 26 |       require("request").get("https://mwittrien.github.io/BetterDiscordAddons/Library/0BDFDB.plugin.js", (e, r, b) => {
 27 |         if (!e && b && r.statusCode == 200) require("fs").writeFile(require("path").join(BdApi.Plugins.folder, "0BDFDB.plugin.js"), b, _ => BdApi.showToast("Finished downloading BDFDB Library", { type: "success" }));
 28 |         else BdApi.alert("Error", "Could not download BDFDB Library Plugin. Try again later or download it manually from GitHub: https://mwittrien.github.io/downloader/?library");
 29 |       });
 30 |     }
 31 | 
 32 |     load() {
 33 |       if (!window.BDFDB_Global || !Array.isArray(window.BDFDB_Global.pluginQueue)) window.BDFDB_Global = Object.assign({}, window.BDFDB_Global, { pluginQueue: [] });
 34 |       if (!window.BDFDB_Global.downloadModal) {
 35 |         window.BDFDB_Global.downloadModal = true;
 36 |         BdApi.showConfirmationModal("Library Missing", `The Library Plugin needed for ${config.info.name} is missing. Please click "Download Now" to install it.`, {
 37 |           confirmText: "Download Now",
 38 |           cancelText: "Cancel",
 39 |           onCancel: _ => { delete window.BDFDB_Global.downloadModal; },
 40 |           onConfirm: _ => {
 41 |             delete window.BDFDB_Global.downloadModal;
 42 |             this.downloadLibrary();
 43 |           }
 44 |         });
 45 |       }
 46 |       if (!window.BDFDB_Global.pluginQueue.includes(config.info.name)) window.BDFDB_Global.pluginQueue.push(config.info.name);
 47 |     }
 48 |     start() { }
 49 |     stop() { }
 50 |   } : (([Plugin, BDFDB]) => {
 51 |     var settings = {};
 52 | 
 53 |     return class VideoBackground extends Plugin {
 54 |       onLoad() {
 55 |         this.defaults = {
 56 |           settings: {
 57 |             videoLink: {
 58 |               value: "video link",
 59 |               description: "Youtube video/playlist or direct MP4/WebM/OGG link"
 60 |             }
 61 |           }
 62 |         };
 63 |       }
 64 | 
 65 |       onStart() {
 66 |         this.runVideo();
 67 |         this.forceUpdateAll();
 68 |       }
 69 | 
 70 |       onStop() {
 71 |         this.deleteVideo();
 72 |         this.forceUpdateAll();
 73 |       }
 74 | 
 75 |       getSettingsPanel(collapseStates = {}) {
 76 |         let settingsPanel, settingsItems = [];
 77 | 
 78 |         for (let key in settings) if (this.defaults.settings[key].description) settingsItems.push(BDFDB.ReactUtils.createElement(BDFDB.LibraryComponents.SettingsSaveItem, {
 79 |           className: BDFDB.disCN.marginbottom8,
 80 |           type: "TextInput",
 81 |           plugin: this,
 82 |           keys: ["settings", key],
 83 |           label: this.defaults.settings[key].description,
 84 |           value: settings[key],
 85 |           onChange: (e, instance) => {
 86 |             this.deleteVideo();
 87 |             this.runVideo();
 88 |           }
 89 |         }));
 90 | 
 91 | 
 92 |         return settingsPanel = BDFDB.PluginUtils.createSettingsPanel(this, settingsItems);
 93 |       }
 94 | 
 95 |       onSettingsClosed() {
 96 |         if (this.SettingsUpdated) {
 97 |           delete this.SettingsUpdated;
 98 |           this.forceUpdateAll();
 99 |           this.runVideo();
100 |         }
101 |       }
102 | 
103 |       forceUpdateAll() {
104 |         settings = BDFDB.DataUtils.get(this, "settings");
105 |         BDFDB.PatchUtils.forceAllUpdates(this);
106 |       }
107 | 
108 |       runVideo() {
109 |         let check = BDFDB.DataUtils.get(this, "settings", "videoLink");
110 |         if (check.search("youtube") > -1) {
111 |           this.injectVideo();
112 |         } else {
113 |           this.injectOtherVideo();
114 |         }
115 |       }
116 | 
117 |       injectVideo() {
118 |         console.log("Injecting youtube iframe!");
119 |         let videolink = BDFDB.DataUtils.get(this, "settings", "videoLink");
120 | 
121 |         if (videolink.search("playlist?") > -1) {
122 |           console.log("Youtube Background: loading playlist!");
123 |           let videoPL = videolink.substring(videolink.search("playlist") + 14, videolink.length);
124 |           videolink = videolink.replace("playlist?list=", "embed/videoseries?list=");
125 |           videolink = "https://www.youtube.com/embed/videoseries?list=";
126 |           videolink += videoPL;
127 |           videolink += "&controls=1&iv_load_policy=3&mute=1&showinfo=0&rel=0&autoplay=1&loop=1";
128 | 
129 |         }
130 |         if (videolink.search("watch") > -1) {
131 |           console.log("Youtube Background: loading single video!");
132 |           let videoID = videolink.substring(videolink.search("watch") + 8, videolink.search("watch") + 19);
133 |           videolink = "https://www.youtube.com/embed/";
134 |           videolink += videoID;
135 |           videolink += "?controls=1&iv_load_policy=3&mute=1&showinfo=0&rel=0&autoplay=1&loop=1&playlist=";
136 |           videolink += videoID;
137 |         }
138 | 
139 |         var findVideoClass = document.getElementsByClassName("fullscreen-bg");
140 |         var findAppMount = document.getElementById("app-mount");
141 |         if (findVideoClass.length == 0) {
142 |           var newDiv = document.createElement("div");
143 |           newDiv.id = "fullscreen-bg";
144 |           newDiv.className = "fullscreen-bg";
145 |           var newNewDiv = document.createElement("iframe");
146 |           newNewDiv.id = "fullscreen-bg-video";
147 |           newNewDiv.className = "fullscreen-bg-video";
148 |           newNewDiv.src = videolink;
149 |           newDiv.insertAdjacentElement("beforeend", newNewDiv);
150 |           findAppMount.insertAdjacentElement("beforeend", newDiv);
151 |         } else {
152 |           console.log("Fullscreen-bg class already exists!");
153 |           document.getElementById("fullscreen-bg-video").src = videolink;
154 |         }
155 |       }
156 | 
157 |       injectOtherVideo() {
158 |         console.log("injecting custom video!");
159 |         let videolink = BDFDB.DataUtils.get(this, "settings", "videoLink");
160 |         var findVideoClass = document.getElementsByClassName("fullscreen-bg");
161 |         var findAppMount = document.getElementById("app-mount");
162 |         if (findVideoClass.length == 0) {
163 |         var newDiv = document.createElement("div");
164 |         newDiv.id = "fullscreen-bg";
165 |         newDiv.className = "fullscreen-bg";
166 |         var newNewDiv = document.createElement("video");
167 |         newNewDiv.id = "fullscreen-bg-video";
168 |         newNewDiv.className = "fullscreen-bg-video";
169 |         newNewDiv.muted = true;
170 |         newNewDiv.loop = true; 
171 |         newNewDiv.autoplay = true;
172 |         var source = document.createElement("source");
173 |         source.src = videolink;
174 |         newNewDiv.insertAdjacentElement("beforeend", source);
175 |         newDiv.insertAdjacentElement("beforeend", newNewDiv);
176 |         findAppMount.insertAdjacentElement("beforeend", newDiv);
177 | 
178 |         } else {
179 |           console.log("Fullscreen-bg class already exists!");
180 |         }
181 |       }
182 | 
183 |       deleteVideo() {
184 |         var elem = document.querySelector("#fullscreen-bg");
185 |         elem.parentNode.removeChild(elem);
186 |       }
187 |  
188 | 
189 | 
190 |     };
191 |   })(window.BDFDB_Global.PluginUtils.buildPlugin(config));
192 | })();
193 | 


--------------------------------------------------------------------------------