help: I can't put an animated background

[michoko999]

Hello,
When I put the MP4 video link as background nothing happens
I would like to know which link works to put an animated background

[zombieFox]

Hi, sorry you are having a problem with nightTab. Can you provide a few more details please:

• What is the URL of the MP4 you are using?
• Please describe the steps you took to add a video background
• Which browser are you using? Please include the version number
• Which OS are you using?

[michoko999]

URL: https://www.youtube.com/watch?v=Gv2ynaXDuOQ
Parameter> Background> Visual> Video> URL
Chrome: Version 90.0.4430.93 (Official build) (64 bits)
Windows

[zombieFox]

Thanks for those extra details. I'm afraid youtube videos can't be used as backgrounds. That URL is the address to a youtube page. I'm afraid nightTab only supports direct links to MP4 files, eg: https://pixabay.com/videos/download/video-40581_large.mp4

[Marcelx8]

Hi, I found a way that you can make this work, but it's a 'hack-around' and requires VLC. I tested it myself.

I found a forum discussion to get the direct URL from a Youtube video. Here are the steps to follow:

1. Find a video on YouTube and copy the URL from the address bar.
2. In VLC, head to Media > Open Network Stream.
3. Paste the YouTube link in the box and click Play.
4. Under Tools, click Codec Information.
5. In the box that says Location, right-click the block of text and click Select All. Copy this text to your clipboard.
6. Go back to your browser and paste the link in the address bar. This will open the source file directly on YouTube's servers. (This is the URL that you can paste into the nightTab video background input.)
7. Right-click the video as it plays and select Save Video As.

Link to the actual discussion:
https://webapps.stackexchange.com/questions/47465/how-to-obtain-the-direct-link-to-a-youtube-video-file

[zombieFox]

Great find @Marcelx8! I think you just cracked it.

I think I hit a problem with my helper function not working well with the URL when using the method you found. But I might be able to change the way the src attribute is added to the background element to make this work.

I'll see what I can do.

[Dawid8plc]

Alternatively, a local file server can be set up that could contain all the backgrounds, images, icons, and other stuff you would like to use, I was able to download the provided video, and put it on an IIS server. Of course, this method requires a lot of setup and it's not exactly simple, just putting it out there, though.

[Marcelx8]

@zombieFox I'm glad this helped. :)

[Marcelx8]

@Dawid8plc you are right. Maybe even have a local folder location selectable to read images and videos from. Almost how a gallery would display the contents of the directory. I guess this topic now extends to adding new features 😄

[Dawid8plc]

Being able to use files from the drive would indeed be a really useful feature, although not sure if Chrome Extensions can access folders like that.

[zombieFox]

This has been asked before in other posts, (I'm too lazy to dig them out right now). But the tl;dr is because nightTab does not store user data (to a database or an account) it stores bookmarks and theme settings in the browsers local storage. So the space is very limited.

The background image feature which I added allows a user to search for a local file. That is as much as an extension can do, open local files but not access whole directories. (And in retrospect allowing users to access local images for the background has caused issues with hitting the max space in local storage [along with a few other issues]. Hosting is really the safer option.)

@Dawid8plc suggestion is what I have been recommending in other posts, users who want more videos or images have to host them somewhere. Then link to individual files with URLs. But this requires end users to do some set up on something like a private GitHub repo, or Imgur.

[Marcelx8]

@zombieFox
Interesting, and thank you for your time to explain.

[RohitHazra]

I can't tell about YouTube video but I used videos from pixabay.com
Follow these steps to change background video:

1. Open any pixabay videos. Ex: https://pixabay.com/videos/tunnel-space-abstract-science-line-23411/
2. Press F12 or Ctrl+Shift+I to open Inspect menu.
3. Make sure you are in the Elements tab and search for this line <script type="application/ld+json">. Double click to expand it.
4. There will be a line like this : "contentUrl": "//player.vimeo.com/external/335603656.sd.mp4?s=56cd3cc3df4d570ada85034d13900b7869243d38&profile_id=164",
5. Just Copy the link from that line player.vimeo.com/external/335603656.sd.mp4?s=56cd3cc3df4d570ada85034d13900b7869243d38&profile_id=164 and paste it in your broswer.
6. You will get a new address. Just copy that and paste it in the NightTab video url. https://vod-progressive.akamaized.net/exp=1630877222acl=%2Fvimeo-prod-skyfire-std-us%2F01%2F2120%2F13%2F335603656%2F1328073940.mp4hmac=92817b663b8fb01ade24e0d2f03341a6ade4d2789464fd33d76aa762560577b4/vimeo-prod-skyfire-std-us/01/2120/13/335603656/1328073940.mp4?filename=Tunnel+-+23411.mp4

[zombieFox]

@RohitHazra whoa, interesting method!
No comment on whether hotlininking is ok. 😄

[Scr0ll3r]

I found another way to get the animated video background from youtube, a file from your pc or any streamable video.
(requires Discord = https://discord.com/ ):

1. Use a website to download the youtube video ( I used https://www.y2mate.com/en297 )
2. Upload the video to discord. ( If your file is bigger than 8mb try to find a server boosted discord server, i just used Crispy
   Concord's server: https://discord.gg/fcEAmDxN77 ) (You can upload it to the media tab)
3. Right Click the uploaded video, and click "Copy link".
4. Paste the link in the NightTab settings/Theme/Background/URL
5. You can even delete the video you uploaded to Discord, if you want to. (I haven't had the background for long term yet but I
   think it'll work.)

Message to @zombieFox , maybe try making a discord server where people can upload their files, so they can use the links. (U can have people boost the server for bigger uploads)

[NotDevName2]

Background Image not working
https://pixabay.com/photos/night-stars-light-download-cloud-7162435/

[metruzanca]

@NotDevName2 If thats the link you're using, thats not a link to an image. Thats a link to a webpage that has an image. You need a direct link to the image, in this case https://cdn.pixabay.com/photo/2022/04/29/04/01/pasta-7162435_960_720.jpg is the image used on that web page.

To get image urls, its quite simple. Right click on the image and click "copy image link" as show in image below:

---

Certain sites, like instagram prevent you from copying images like this so you'll need to dig into the devtools to find image urls.