The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> 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: 64
Attached Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Aug 15 2023, 08:27 AM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,733
Joined: 9-August 06
Member No.: 6
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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
coothead
post Aug 15 2023, 03:18 PM
Post #3


Advanced Member
****

Group: Members
Posts: 206
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
« 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: Standard · Switch to: Linear+ · Switch to: Outline

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

- Lo-Fi Version Time is now: 27th April 2024 - 12:48 PM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC