Is there a way to position a video towards the right side of the screen?

I'm working with an HTML5 video that has a height greater than its width. I've set the video to have 100% in height and 100% in width so it scales automatically based on my window size.

However, I want the video to be positioned on the right side of its container. Currently, as shown in the image below, the video content is centered.

Is there a way to achieve this layout?

Here's a screenshot of the video element

.container {
width: 100%;
display: flex;

}

.left,
.right {
height: 100vh;
width: 50%;
border: 1px dotted blue;
display: flex;
align-items: center;
}

.video {
    width: 100%;
    height: 100%;
}
<div class="container">
  <div class="left">

  </div>
  <div class="right">
    <video class="video" playsinline loop autoplay muted>
      <source src="" type="video/mp4">
    </video>
  </div>
</div>

htmlcssvideoresponsive

Answer №1

A common issue arises when the video element has a width: 100%; style applied to it. This causes the video to stretch across the full width of its parent container, even if the video itself is smaller. To address this, simply remove the .video { width: 100%; } declaration. Additionally, to align the video to the right within its container, you can use the CSS property: margin-left: auto

.container {
  width: 100%;
  display: flex;
}

.left,
.right {
  height: 100vh;
  width: 50%;
  border: 1px dotted blue;
  display: flex;
  align-items: center;
}

.video {
  height: 100%;
  margin-left: auto;
}
<div class="container">
  <div class="left">

  </div>
  <div class="right">
    <video class="video" playsinline loop autoplay muted>
      <source src="https://marceldiedrich.com/so/video-hor.mp4" type="video/mp4">
    </video>
  </div>
</div>

Answer №2

To ensure that the video scales automatically, it is recommended to nest the video within another div. As suggested by @tacoshy, the main issue lies in setting the width to 100%, which hinders the use of margin-left auto and limits scalability.

An alternative approach is to utilize width: fit-content; to wrap the video and specify the height as 100%. Subsequently, apply margin-left: auto; to the new div instead of directly on the video element to achieve scalability.

.container {
  width: 100%;
  display: flex;
}

.left,
.right {
  height: 100vh;
  flex: 1;
  border: 1px dotted blue;
  display: flex;
  align-items: center;
}

.video {
  width: 100%;
  height: 100%;
}

.right>div {
  height: 100%;
  width: fit-content;
  margin-left: auto;
}
<div class="container">
  <div class="left">

  </div>
  <div class="right">
    <div>
      <video class="video" playsinline loop autoplay muted>
      <source src="https://marceldiedrich.com/so/video-hor.mp4" type="video/mp4"></video>
    </div>
  </div>
</div>

Safari users can also implement a similar solution (even with shrinking viewport height) using ~

.container {
  width: 100%;
  display: flex;
}

.left,
.right {
  height: 100vh;
  flex: 1;
  border: 1px dotted blue;
  display: flex;
  align-items: center;
}

.video {
  max-width: 100%;
  height: 100%;
}

.right>div {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: flex-end;
}
<div class="container">
  <div class="left">

  </div>
  <div class="right">
    <div>
      <video class="video" playsinline loop autoplay muted>
      <source src="https://marceldiedrich.com/so/video-hor.mp4" type="video/mp4"></video>
    </div>
  </div>
</div>

Answer №3

Your CSS style is perfectly fine, the issue lies with the video element which has excessive spacing.

To address this, you can utilize object-fit and adjust the width to crop and modify the video accordingly.

.container {
width: 100%;
display: flex;
}

.left,
.right {
height: 100vh;
width: 50%;
border: 1px dotted blue;
align-items: center;
overflow:hidden
}

.video {
    width: 110%;
    height: 110%;
    border: 2px solid red;
    margin-left:calc(-2vw);
    margin-top:calc(-2vh);
    object-fit:cover
}
<div class="container">
  <div class="left">

  </div>
  <div class="right">
    <video class="video" playsinline loop autoplay muted>
      <source src="https://marceldiedrich.com/so/video-hor.mp4" type="video/mp4">
    </video>
  </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Struggling to center divs in HTML and CSS but running into issues on mobile devices?

I've been facing some serious CSS issues lately! Currently, I have everything set up to center the #Box div, which works perfectly on all devices except for mobile browsers. The problem arises because the screen size of the mobile browser is too narr ...

iphonecsshtmlcenter

Safari's compatibility issues with Next.js Images are preventing Flexbox from working properly

I'm trying to lay out Next.js Images using flex-wrap with a fixed height but variable width based on the image. I'm utilizing tailwind for this project. Everything is working perfectly on Google Chrome as expected. https://i.sstatic.net/KTTx9.j ...

cssnext.jstailwind-css

Ensure that the HTML link is valid and authenticated using SESSIONS

When creating a website, one of the initial tasks I like to tackle is adding links at the bottom of the page for checking valid HTML and CSS: HTML5  •   CSS <div> <a href="http://validator.w3.org/check?uri=referer" ...

javascripthtmlajaxvalidation

Retain the dashes in their original positions while extracting numbers following each dash from an array using Regex

Someone from a different discussion helped me figure out how to extract the numbers from an array. However, I am now struggling to capture the numbers after the "-" dash. Let me illustrate what I have and put you in the same scenario. Here is the array co ...

phphtmlarraysregexnumbers

The Group Hover feature in Tailwind CSS seems to only affect the initial SVG element and not any subsequent SVG children within the group

I encountered an issue with TailwindCSS (version 3.2.4) regarding group-hover, where hovering over elements with SVG child elements only seems to affect the first element and not the others. For a demonstration, I have set up an example on the TailwindCSS ...

javascripthtmlcsstailwind-css

Unusual default Nav bar positioning

When attempting to create a navbar, I encountered small gaps that seemed impossible to close. Adjusting margins only resulted in new gaps appearing on the opposite side. Even when trying to find a compromise, I ended up with gaps on both sides instead. It ...

htmlcss

CSS issue encountered: "Value of property is not valid"

When working with CSS, I encountered an error stating "Invalid Property Value" while inspecting the transform element of the Service section in the Wall Street theme. Could someone kindly assist me with the necessary steps to rectify this issue? https://i ...

csstransform

The outline color cannot be removed from vue-carousel

I recently downloaded the Vue Carousel library and here is the version I am using: "vue": "^2.6.11", "vue-carousel": "^0.18.0", When I click on the pagination, a focus effect is added to the element with an outlin ...

javascriptcssvue.jscarousel

Keeping track of PHP form information for showcasing currency throughout a website

I have integrated a currency conversion dropdown on my WordPress site, but I'm facing an issue where the selected currency resets every time I navigate to a new page. Do you have any recommendations on how to resolve this? I attempted using a JavaScr ...

phphtmlwordpressforms

What is the best way to apply fill to SVG using Tailwind CSS?

I tried using the code provided, but unfortunately, I was unable to Override the fill. The issue seems to have been resolved, but can someone help me achieve this using tailwind CSS? <div className=""> <svg className="text- ...

cssnext.jstailwind-csstailwind-in-js

Inquiries for Web-Based Applications

As I contemplate coding my very first webapp, I must admit that my skills are somewhere between beginner and intermediate in html, css, js, jquery, node, sql, and mongodb. However, the challenge lies in not knowing how to bring my vision to life. My ulti ...

javascripthtmlcssweb-applicationsvue.js

Transforming Symbol Characters into HTML Using VB.NET

I want to make sure that any characters in my database entry that are not numeric or alphabetic get converted to HTML code. After doing some research, I came up with the following function: Public Shared Function HTMLEncodeSpecialChars(text As String) As ...

htmlvb.netcharacter-encoding

Positioning the navigation buttons along the edges

I'm struggling with creating a custom slider and am having trouble placing the navigation buttons on the sides. You can view the current layout on JSfiddle: http://jsfiddle.net/zfxrxzLg/1/ Currently, the navigation buttons are located underneath the ...

jqueryhtmlcss

Delete items within the first 10 minutes of shutting it down

Is there a way to temporarily remove a newsletter element for 10 minutes after closing it on a webpage? The idea is that once the panel is closed, it should stay hidden even if the page is refreshed within that timeframe. I was considering using local stor ...

javascripthtmlcss

Sliding a div out from the right using jQuery

I am attempting to create a sliding effect from the right on a div using jQuery. I have managed to accomplish part of it, but not exactly as I would like. You can view my code on this JSFiddle. While the div slides out smoothly, the text inside wraps when ...

jquerycss

Google Extension PHP Plugin

Is it feasible to integrate a PHP file into a Google Extension for Chrome? I've been exploring the idea of creating an extension and most resources only mention HTML, CSS, and JavaScript. Any guidance on using PHP in the extension would be highly valu ...

phpjavascripthtmlcssgoogle-chrome-extension

Strategies for making a child div fade out when the parent div is hovered over

I have a div with the class name ordershape and inside it, there is another div called fad-res. My goal is to display the corresponding fad-res when I hover over a specific ordershape, while hiding the other divs. <div class="ordershape"> & ...

javascripthtmlcss

Learn how to dynamically add comments to HTML elements in AngularJS

Here is the meta tag that I have: <meta title='raja' identifier> I would like to know how to manipulate the DOM so it looks like this: <!-- reference <meta title='raja'> --> Could you recommend a way to manipulat ...

angularjshtml

How can I remove a specific JSON object from localStorage based on the data associated with the element that is currently being clicked on?

Unique Scenario A user interacts with an element, triggering a change in the background image and storing data related to that element in localStorage: this process functions correctly. Next, the toggle variable is set to 0, the background image change ...

javascriptjqueryhtmlcsslocal-storage

"Utilizing JQuery to enhance task management by implementing a delete function

I need help figuring out how to create a function that can delete tasks from my todo list. Currently, each task has its own remove button, but I want to implement a single remove button at the bottom that removes checked or crossed out tasks. Any suggestio ...

javascriptjqueryhtmlcss