MyBB Community Forums

So i have this code:

<div class="background-video-wrapper"><video autoplay="" loop="" poster=""><source src="https://hzweb.hi-rezgame.net/smite-web/wp-content/uploads/2016/02/Raijin_2048_Webm.webm" type="video/webm"></video></div>

With this CSS:

.background-video-wrapper{
	position:relative;
	overflow:hidden;
	width:2048px;
	height:300px;
	top:100;
	left:50%;
	margin-left:-1024px;
	pointer-events:none;
}

But I dont understand how can I make it fixed by the site resolution or whatever I dont know how to call it. I tried "position: fixed;" it almost did what I want but not at all...
Here is the problem:

I want the red thing to not be like this (to not do bigger the page).

basically width needs to be set to 100% (or lower)
and other related properties --- left:50%; & margin-left:-1024px; should be changed to fit element within the width of the browser