Full Page Video Background

#1

I posted this question on Groups and got some tremendous help from John D, but I don’t have it working yet. I want a full-page video background that autoplays on startup. Here’s the code that I have so far; it’s in a tiddler called VideoBackground, and it’s tagged with the following: $:/tags/PageTemplate, $:/tags/StartupAction/PostRender, $:tags/StartupAction.

< style>
.tw-background video{
position:fixed;
z-index: -1;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
object-fit: cover;
}
< /style>
< div class=“tw-background”>
< video autoplay muted loop>
< source src=“videos/VideoBackground.mp4”>
Sorry, your browser doesn’t support embedded videos.
< /video>
< /div>

The video does not autoplay unless I change my browser’s (Edge on Windows 11) autoplay settings to “Allow”. It does load, but doesn’t play. If I edit the VideoBackground tiddler and actually make a change, like adding a character, then when I exit edit mode the video plays just fine.

I put up my Tiddlywiki with the VideoBackground tiddler on the “home” page so that you could look at it if you wish and hopefully help me with a solution: America's Great Loop . Thanks in advance!

1 Like
#2

For the giggles, I downloaded your video, uploaded it to a site that converts mp4 to gif, then downloaded the gif and dragged into your TiddlyWiki.

I then made these change to your “VideoBackground” tiddler:

<style>
.tw-background img{
    position:fixed;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh; 
    object-fit: cover; 
}
</style>
<div class="tw-background">
{{ ezgif-7-839f73ca0899.gif }}
</div>

That works A-1.

#3

Charlie,

Thanks, that did work but it made my file size 66MB! Maybe a different converter would produce a smaller file, but I’d really like a solution that lets me link an external video file. Seriously creative idea converting it to a GIF!

Scott

#4

@MrBatman777 If you wanted to use Charlie’s brilliant Gif gif background Idea simply adding a splash screen to support the loading of a larger wiki , now it has the video background. May be sufficient in many cases.

But I understand the value of linking to an external video ands I hope people can help you achieve this and I would encourage you and @Charlie_Veniot to post your solution as a “How To” in the “How To” category.

When you stop to think about it an internal Gif or an external video still demand loading into the browser of the user. From a performance perspective they may not differ much.

It seems to me this is about timing and who pays for the bandwidth, this being a value of external videos, your host need not deliver them.

I wonder if the background Gif or External Video method could also be the splash screen? Depends on the 66MB load time in this example?

#5

If only I could figure out which hamster on which spinning wheel in the back of my sponge came up with that one …

Just something I tried for the heck of it, which doesn’t help much if you want to stick to video in the background.

I just dragged the gif into the TiddlyWiki for the quick and dirty convenience. You might want to try that as an external gif, and maybe one that isn’t as big. I just went to the first mp4-to-gif web site I could find without any futzing around. I’m betting a much smaller file can be created, likely not as detailed resolution, likely fewer frames making for slighly choppier motion. Choppier seas ???

All of that really out of my sphere of knowledge, so I know just enough to be slightly dangerous.

Best wishes !

1 Like
#6

That’s an excellent point.

And either way, big video or big gif, a browser is likely to cache either equally? So although the thing may only get downloaded once and cached, maybe better to go with a lower resolution and slightly choppier gif?

Yeah, I’m more questions than answers …

#7

Well that’s the thing, the MP4 is only 4.41MB and is the quality that I would want for the background, while the GIF is 44.5MB. I don’t mind the load time for 10MB total for both the TW and the MP4, but 66MB for the TW and the tiddlered GIF is more than I’d like - but it may be my only option. I’ve been using TW for years now, but I’ve always gone crossed-eyed when I’ve started trying to figure out how it actually works. I was pretty happy with myself for writing a JS macro that calculated the distance across the 10,000+ lat/long point in my leaflet map, but that only lasted until I tried to do something seemingly simple, like making a video play in the background! Thanks for everyone’s help, I’ll keep working on it and will definitely post a solution if I find one.

Scott

1 Like
#8

GIF is easy. Video, not so much.

I think.

Based on How TO - Fullscreen Video, you need some javascript.

The javascript is to start and restart the video, if I understand that code correctly.

#9

I’ve got a fix to get your video working.

Find the fix in the Google Group post: https://groups.google.com/g/tiddlywiki/c/I-z64d9VbNw

The fix does involve slapping javascript into an iframe.

Some folk see that as a risk. Me: meh.

#10

By the way, the code in the new tiddler I created comes from this page at w3schools.

I removed stuff related to footer text and a button, but may have forgotten to take out some stuff that is related. Doesn’t hurt any, but if you want to keep it to a bare minimum …

#11

GIF has indeed less restrictions for autoplay purpose because they do not have audio capabilities, however this format is less performant than video.

See https://web.dev/efficient-animated-content/

Since you’re okay with converting your video, the current best choice seems to be mp4 (best support) + the solution provided by @Charlie_Veniot

#12

There is no longer a need to convert the video.

#13

Oups, I meant to write mp4 + WebM (for browsers that support it), thanks for pointing this out

#14

That’s fantastic, it works perfectly! America’s Great Loop! (lifelivedsideways.net)

The irony is that when I originally posted in Groups, I used that very same w3schools link as an example of what I was trying to do … I probably should’ve made more of an effort! Thanks again Charlie, you’re a lifesaver.

Scott

#15

Man, I don’t know what kind of effort that would have involved.

Getting javascript in there via iframe is a pretty sneaky trick I come up with not too long ago.

Because I loathe javascript. Javascript is to me like the kiss of death.

But some things are just wickedly easier with javascript.

But getting javascript into TiddlyWiki is, iframe trick aside, about as much fun as getting a tooth pulled and a colonoscopy simultaneously, but having both done from the wrong ends.

There’s a picture …

BTW: I’m really glad we’ve got that working for you ! Your video not working was bothering me.

#16

Yeah, that’s a picture all right! I’m with you on Javascript, I loathe it completely. It just feels hacked together. If I’m going to write code, I prefer C or Python (I know, can they BE any more different) and only use JS when absolutely necessary (just like a colonoscopy or pulling a tooth). I really appreciate the help - I’m building a boat and will be doing the Great Loop trip next spring, so my time is incredibly limited and getting the video background to play, while important, wasn’t something I could prioritize over, say, working to pay for the boat and the trip! Now, if I could only find someone to teach me to weld aluminum, I’d be all set. Thanks again!

#17

That is quite awesome.

BTW: normally, anything moving on a web page drives me bonkers. But that video on your page is doing the exact opposite for me. Really soothing and quite beautiful. Congrats !

#18

Me too! I went to Virginia Tech back in 2000 and got a MS in Computer Science and Usability Engineering, so webpage movement (or anything that distracts from the content) is usually a no-no for me. But with this website, I wanted to convey a sense of motion on the water to go along with the information about my trip, so an understated video background made some sense. I’m not much for style for style’s sake, but I thought I should get with the times a bit.

#19

@Charlie_Veniot & @MrBatman777. Just a general comment on this thread.

I found it interesting and useful as it’s essentially exploring quite difficult technical issues …

I myself work with (make) videos quite often. The general approach at the moment is to let the “hosting service” handle the complexity of appropriate delivery loading (e.g. I tend to use Vimeo as it a bit more “creator orientated” than the Tubes: example Weyersberg-Annunciation.)

This is maybe something that could be probed into more? I think it is becoming more important to understand how to use TW for various kinds of “moving image” scenarios.

Side comment
TT

#20

Sometimes it just makes sense to involve yet another hosting component to a solution. But the more external components you depend on, the more brittle the solution.

As per the referenced code at w3schools, it is ridiculously easy to do the looping video thing for a video hosted by the same host as the TiddlyWiki. The only challenge there is getting the javascript working.

My approach to javascript is a little out there. (Well, I rather like it.)

1 Like