Positioning video in responsive design

[kssimbak]

I need some help making a video stay in position on the background image while being responsive, i’m currently learning on responsiveness so any information is highly appreciated.

you can view the site on https://kssimbak.github.io/,
the css for the video looks like this

#parentDiv {
	position: relative;
}

.videoPlayer {
	position: absolute;
	top: 13.5%;
	left: 21%;
	z-index: 3;
}

.videoPlayer video {
	width: 55vw;
	height: 58vh;
}

@media screen and (max-width:395px) {
	.videoPlayer video {
	width:55vw;
	height:18vh;
	}
	.videoPlayer {
		position: absolute;
		left: 9.5vh;
		top: 2.7vh;
	}
}
@media screen and (min-width:844px) and (max-width:845px) {
	.videoPlayer video {
	width:60vw;
	height:70vh;
	}
	.videoPlayer {
		position: absolute;
		left: 40vh;
		top: 20vh;
	}
}

@media screen and (min-width:1920px) and (max-width:1921px) {
	.videoPlayer video {
	width:55vw;
	height:65vh;
	}
	.videoPlayer {
		position: absolute;
		left: 37vh;
		top: 13vh;
	}
}

[PaulOB]

@kssimbak

I need some help making a video stay in position

Where is it that you want the video to be?

I see this:

Or are you trying to place that ‘matrix’ effect over the image of the monitor (although the monitor already shows an image)?

Or was that matrix effect just supposed to be central over the whole screen?

[PaulOB]

Assuming you want the matrix effect attached to the monitor in the background picture then the closest I can get without changing the html is as follows.

.videoPlayer {
position:absolute;
top:15%;
left:21vw;
width:55%;
z-index:3;
}
.videoPlayer video{
width:100%;
height:100%;
}

That will produce these screenshots at different screen sizes.

A more foolproof way would have been to extricate the monitor image from the background image and then use that as the container for the video. That would be easier to manipulate sizes than basing it on the whole screen.