The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

> VIDEOS NOT CENTER
halim12
post Aug 15 2023, 08:16 AM
Post #1





Group: Members
Posts: 3
Joined: 15-August 23
Member No.: 29,022
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 ?
sad.gif sad.gif Attached File  po2.html_css.txt ( 501bytes ) Number of downloads: 80
Attached Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
 
 Reply to this topicStart new topic
Replies
coothead
post Aug 15 2023, 03:18 PM
Post #2


Advanced Member
****

Group: Members
Posts: 207
Joined: 12-January 23
From: chertsey, a small town 25 miles south west of london, england
Member No.: 28,743
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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Posts in this topic
halim12   VIDEOS NOT CENTER   Aug 15 2023, 08:16 AM
pandy   Centered horizontally? One under the other or side...   Aug 15 2023, 08:27 AM
coothead   Hi there halim12, the following code will work we...   Aug 15 2023, 03:18 PM

« Next Oldest · Markup (HTML, XHTML, XML) · Next Newest »
 

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Switch to: Standard · Switch to: Linear+ · Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 10th June 2024 - 08:52 PM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC