html Creating A YouTube Video Background HTML Website

[Ryois]

So I have a YouTube video in the progress of being rendered that I want to have as my website background. But the thing is that I want it to be the background like

background-color: #hexhere;

 but with a YouTube video. There is already a blur on the video so the text would be visible and more aesthetically pleasing. I would also need an h1 and a subtitle on the above the fold content.

Edited November 1, 2017 by Ryois
Title and Tag clearer

[zwirek2201]

I found 2 examples online that may help you achieve what you need. First of them uses pure CSS and second of them uses CSS and JS.
 

 

Hope it helps.

[Ryois]

1 minute ago, zwirek2201 said:

I found 2 examples online that may help you achieve what you need. First of them uses pure CSS and second of them uses CSS and JS.
 

 

Hope it helps.

I have tried both of these and it didn’t really work that well.

[zwirek2201]

Just now, Ryois said:

I have tried both of these and it didn’t really work that well.

Could you elaborate on why they didn't work for you?

[Ryois]

2 minutes ago, zwirek2201 said:

Could you elaborate on why they didn't work for you?

I am on a iPad right now so I can’t really modify it easily but it would scroll with the video, and I want the video to be stationary. 

[zwirek2201]

2 minutes ago, Ryois said:

I am on a iPad right now so I can’t really modify it easily but it would scroll with the video, and I want the video to be stationary. 

In the second example it does indeed scroll, but I just tried inserting many paragraphs to the first example to make it scrollable and video stays in the background and does not scroll.

[Ryois]

1 hour ago, zwirek2201 said:

In the second example it does indeed scroll, but I just tried inserting many paragraphs to the first example to make it scrollable and video stays in the background and does not scroll.

trying it rightnow..

[Rechdan]

If you still haven't figured out how to solve that scrolling problem, I suggest you to make 2 containers, one being the background with a z-index of 0 and the other where you will actually build your html with a z-index of any number bigger than 0. Now you embed the video using the html5 video tag with the src being the URL to the YouTube video inside the first container, then, in the CSS, you define the container as "position: fixed", "left: 0px", "top: 0px" and set width and height to 100%, then in the video tag you set css as a "object-fit: cover" and "height: 100%" and "width: 100%". I think thats it hahaha

[Ryois]

2 minutes ago, Rechdan said:

If you still haven't figured out how to solve that scrolling problem, I suggest you to make 2 containers, one being the background with a z-index of 0 and the other where you will actually build your html with a z-index of any number bigger than 0. Now, to embed the video, you use the html5 video tag with the src being the URL to the YouTube video then, in the CSS, you define this video tag as a "object-fit: cover" and "height: 100%" and "width: 100%". I think thats it hahaha

gonna try that later cant really code on an iPad...

[Rechdan]

Just now, Ryois said:

gonna try that later cant really code on an iPad...

Excellent, just edited the post because I'm really bad at explaining things..