Full Page Video Background

#21

Right. Though in practice it has also a lot to do with “is the video still existing”? The scale of “take-down” on services like YouTube is phenomenal! That is as much to do with an on-going huge copyright war as it is about performative delivery.

In that sense alone a more permanent way to store/host actual content could be good.

In practice I use video a lot to teach Italians Advanced English … but because of the “disappeared” issue I am forever having to re-do links …

Laters
TT

#22

@MrBatman777 & @Charlie_Veniot the idea of “Full Page Video Background” is actually a good one. In my mind is the vague idea that one could use a TW as a very clever interface to show one video. Additional Tiddlers merely commentary/notes on that video.

Side thoughts
TT

1 Like
#23

Using the srcdoc attribute is a really neat trick !
I was a bit curious and after reviewing your code it seems like the javascript is not needed :

<script>
var video = document.getElementById("myVideo");
var btn = document.getElementById("myBtn");

function myFunction() {
  if (video.paused) {
    video.play();
    btn.innerHTML = "Pause";
  } else {
    video.pause();
    btn.innerHTML = "Play";
  }
}
</script>

myFunction is supposed to be used by a button with the id myBtn. A click on the button toggle the video state (.play() or .pause()), and change the text of the button accordingly to play or pause. What’s interesting is that there is no button in the iframe you provided.

It seems like the autoplay is working only because the video is inside an iframe - I dont know why, it probably has something to do with the way the browser load the iframe…
I also found that the only tag needed is the tag $:/tags/PageTemplate.

With that in mind, it’s possible to get the autoplay working with the following code :

<style>
/*optional, prevent the iframe from hiding the background of the tiddler*/
[data-tiddler-title="{{!!title}}"]{
    z-index:unset!important;
}

.tw-background{
    border:0;
    z-index:-1;
    position:fixed;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
}
</style>
<iframe class=tw-background srcdoc="""
<style>
body{margin:0;}
video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position:fixed;
}
</style>
<video autoplay muted loop playsinline preload=Metadata poster="http://placekitten.com/1920/1080">
  <source src="https://i.imgur.com/8EjcHkv.mp4" type="video/mp4">
  Your browser does not support HTML5 video.
</video>
"""/>

Interesting stuff !

PS: Note that we can use a low-res gif for the poster image. We could also use a data-URI to display a static image embedded in the wiki.

EDIT: forgot playsinline, it is necessary on IOS

1 Like
Background image on login page?
#24

That isn’t my code. Copied from w3schools, and I removed the button and the footer from the original, just forget to cleanup reference to the button in the javascript.

I can’t stand javascript, so I didn’t even look at it. I left cleanup to @MrBatman777 and whoever else likes to fiddle with javascript (bleurk.)

1 Like
#25

And not my idea. A great idea and great video selection by @MrBatman777.

1 Like
#26

Revised my post accordingly. TT

#27

Currently 404, Not Found … :woozy_face:

#28

Original link no longer valid. Use the link further down in the thread.

#29

Sorry about that … I had created video.html just for you folks on Talk Tiddlywiki. After Charlie got it working I updated my default.html file accordingly and deleted video.html, so it’s here now: https://lifelivedsideways.net/gl

2 Likes