How to place video tags to match background images.

We are currently building a website with html and css.
I would like to do the following:

Use a single picture as a full screen background
Display the video on the LCD of a device like an iPad in the center of the image

background image

For background images, you can easily create a full screen background by specifying the body element as background-size:cover.

body{
    background-image:url('/path/to/image.png');
    background-repeat —No-repeat;
    background-position:center;
    background-attachment:fixed;

    - webkit-background-size:cover;
    -moz-background-size:cover;
    -o-background-size:cover;
    background-size:cover;
}

However, it is not possible to place the video on top of it with video elements.
Even if the initial arrangement is successful, if the window is resized, the position of the video and the background will be shifted.I thought about controlling the position of the video with JavaScript, but I couldn't deal with it well because of the complexity of resizing the position.

What should I do to align the video with the background?
Is it strange to put the background together in the first place?
If so, what approach should I use to build it?

I would appreciate it if you could let me know.
Thank you for your cooperation.

css html5

2022-09-30 14:29

1 Answers

It's not impossible to have even one background.The problem is that when you use background-size:cover, the width or height of the background image depends on the aspect ratio of the window.So, it's okay if you separate the cases and calculate them.I can do it with Javascript, but CSS seems lighter, so I tried it with CSS (calc, vw, vh, and so on, but I think any recent browser will work.IE8 is not allowed.)

html,body{
	margin:0;
	height —100%;
}
body{
	background-image:url("http://i.stack.imgur.com/LYx2E.jpg");
	background-size:cover;
	background-repeat —No-repeat;
	background-position:center;
}

/* Vertical == Window aspect ratio < Image aspect ratio == Image magnification depends on window height (so use vh) */
#vid{
	US>background-color:rgba(0,255,0,0.5); /* Green with this*/

	/* You can fine-tune it with the last coefficient of the expression.Match the image.*/
	/* 2000 and 1333 are the width and height of the images used in the question, so change them to match the images.*/

	/* The location is calculated by deviating from the center (50%).*/
	position:absolute;
	left —calc (50%-100vh/1333*2000*0.123);
	top —calc (50%-100vh*0.185);

	/* Size is simply calculated from window height*/
	width —calc (100vh/1333*2000*0.246);
	height —calc (100vh*0.37);
}

/* Yokonaga == Window aspect ratio > Image aspect ratio == Image magnification depends on window width (so use vw) */
@media(min-aspect-ratio:2000/1300){
	#vid{
		US>background-color:rgba(255,0,0,0.5); /*Red with this*/

		/* Just change the above expression to vw dependency. If the coefficient is the same as above, it should be smooth to switch.*/
		position:absolute;
		left —calc (50%-100vw*0.123);
		top —calc (50%-100vw/2000*1333*0.185);
		width —calc (100vw*0.246);
		height —calc (100vw/2000*1333*0.37);
	}
}

<divid="vid"></div>

As you can see from the comments, the example uses media query to calculate differently if the aspect ratio of the window is larger than the aspect ratio of the background image (image magnification depends on window width).In order to show the switchover, red for width-dependent and green for height-dependent, translucent div.If you change it to the video tag, it will work as it is.

2022-09-30 14:29

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656