🖥 CSS Snippet: Video Backgrounds!

OK! Video backgrounds. I've done a bit of testing and this process seems to be working pretty well out of the box with a bog-standard SpaceHey profile. Your mileage may vary but it seems to work well in Safari and Chrome, and there's a fallback for mobile. You will need a few things!

1) Pick a YouTube video and save its ID Number ( which is found in the URL, right here I've bolded it. You need everything after the equals sign: https://www.youtube.com/watch?v=6peHtgK0-tM )

2) Pick a backup mobile image! I would recommend going to Unsplash and picking something fun.

OK! Here's the code. Find the things in the brackets and replace them (and replace the brackets too!) with the info above and paste it all in any of your profile boxes.

<div class="video-background">
	<div class="video-foreground">
		<iframe allowfullscreen class="bg_video_maybe" frameborder="0" src="https://www.youtube-nocookie.com/embed/[PUT THE YOUTUBE ID NUMBER HERE]?controls=0&autoplay=1&mute=1&showinfo=0&rel=0"></iframe>
	</div>
</div>
<style>
	@media screen and (max-width: 600px) {
		.video-foreground {
			visibility: hidden;
		}
	}
	.video-background {
		background: #000 url('[BACKUP IMAGE URL; you can change no-repeat to repeat if it's a pattern]') no-repeat center;
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: -99;
	}
	.video-foreground, .video-background iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		pointer-events: none;
	}
	main {
		/* This changes your profile background in order to have the video visable, change the 0.6 to any number between 0 and 1 to change the visibility */
		background-color: rgba(255, 255, 255, 0.6);
	}
	@media (min-aspect-ratio: 16/9) {
		.video-foreground {
			height: 300%;
			top: -100%;
		}
	}
	@media (max-aspect-ratio: 16/9) {
		.video-foreground {
			width: 300%;
			left: -100%;
		}
	}
</style>

On mobile, because autoplay videos doesn't work, it'll fall back to the image you choose. Works well in desktop on Safari and Chrome! I suppose theoretically you could delete the "mute=1&" in the iFrame tag to make the audio play if you wanted to. I'm not sure it'll work and I can't be arsed to test it right now. Let me know if you try! Good luck and lemme know if you have any questions!

11 Kudos

Comments

Displaying 4 of 4 comments ( View all | Add Comment )

Kogi Hime	1610813089 couple questions-- I already have a bracket for everything-- if i just wanna add this... I grab everything inside the <style> brackets here, and just place it in what already exists right? But where does the <div sheet go? do i put it above the < style> brakcet orrr near the youtube code for organization? Report Comment i guess i could just test it too lol also, hello! ty for these really cool add-ons and tricks. I am excited to use the intro animation too. Gonna use it for promoting my artwork by Kogi Hime; 1610813210; Report
magdalen rose™️	1610737002 I think I did mine wrong, I got it to play a video in my About Me (you can see it there now). It seems to auto play but there's no audio. Is it maybe conflicting with my other code? Report Comment
CursedQueen	1610729480 You are nothing shy of a God my friend. I am incredibly impressed Report Comment
Nope	1610728370 This is making me so happy. Holy cow. It's almost as if, dare I say, you're a spacehey hero. Report Comment