Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Markup (HTML, XHTML, XML) _ VIDEOS NOT CENTER

Posted by: halim12 Aug 15 2023, 08:16 AM

I set 2 videos at the page, trying to center them ... they move down as u see !!!

on different resolutions, they are not centered ... what to do ?
po2.html_css.txt ( 501bytes ) Number of downloads: 80

Posted by: pandy Aug 15 2023, 08:27 AM

Centered horizontally? One under the other or side by side?

If you want them under each other and centered horizontally you could use the below instead of what you have.

CODE

div.video1, div.video2 { text-align: center }

Also read this:
https://www.w3.org/Style/Examples/007/center.html

Posted by: coothead Aug 15 2023, 03:18 PM

Hi there halim12,

the following code will work well on all platforms...

HTML

CODE

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>video display</title>

<link rel="stylesheet" href="screen.css" media="screen">

</head>
<body>

<h1>Two videos</h1>

<div id="video-container">
<video controls playsinline>
<source src="video/VIDEO1.mp4" type="video/mp4">
</video>
<video controls playsinline>
<source src="video/VIDEO2.mp4" type="video/mp4">
</video>
</div>

</body>
</html>

screen.css

CODE

body {
   background-color: #f9f9f9;
   font: normal 1em / 1.5  sans-serif;
  }
h1 {
   font-size: 1.5em;
   font-weight: normal;
   color: #555;
   text-align: center;
}
#video-container {
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 0.5em;
}

#video-container video {
   width: 100%;
   max-width: 28em;
}
@media ( max-width: 42em ) {
#video-container {
   flex-direction: column;
  }
}

coothead