align video element to the right within a container div

I'm attempting to align a video element to the bottom right inside a div. Here is the code I have so far, which successfully aligns the video element to the bottom but not to the right side of the div container:

video {
}

.border.rounded-0.border-secondary.shadow-sm.d-md-flex.align-self-end.justify-content-md-end.align-items-md-end {
}

.border.rounded-0.border-secondary.shadow-sm.d-md-flex.align-self-end.justify-content-md-end.align-items-md-end {
}
<div class="d-inline-flex" style="background-color: #141414;height: 400px;width: 100%;"><video class="border rounded-0 border-secondary shadow-sm d-md-flex align-self-end justify-content-md-end align-items-md-end" width="200" height="100" controls="" style="background-color: #e6e4e4;" preload="none" autoplay="" loop=""></video></div>

Should I consider placing it inside a span instead? Please advise.

htmlcss

Answer №1

If you simply include flex-direction: row-reverse in your d-inline-flex class, you'll achieve the desired outcome.

Since the css you provided was redundant and had no content, I removed those classes from the snippet. I organized the inline-style from the video into a video css class to tidy up the code.

Hopefully, this resolves your issue.

p.s I also noticed the 'bottom' aspect of your question. By using align-items with flex-end, you can move the video to the bottom (I initially assumed you wanted it at the top)...

//at right bottom

.d-inline-flex {
  display: flex;
  flex-direction:row-reverse;
  background-color: #141414;
  height: 400px;
  width: 100%;
}

video {
  width: 200px;
  height: 100px;
  background-color: #e6e4e4;
  justify-content:center;
  align-self:flex-end;
  align-content:flex-end;

}
<div class="d-inline-flex" style="background-color: #141414;height: 400px;width: 100%;"><video class="border rounded-0 border-secondary shadow-sm d-md-flex" controls="" preload="none" autoplay="" loop=""></video></div>

//at right top 

.d-inline-flex {
  display: flex;
  flex-direction: row-reverse;
  background-color: #141414;
  height: 400px;
  width: 100%;
}

video {
  width: 200px;
  height: 100px;
  background-color: #e6e4e4;
  display: flex;
  justify-content: center;
}
<div class="d-inline-flex" style="background-color: #141414;height: 400px;width: 100%;"><video class="border rounded-0 border-secondary shadow-sm d-md-flex" controls="" preload="none" autoplay="" loop=""></video></div>

Answer №2

video {
}

.border.rounded-0.border-secondary.shadow-sm.d-md-flex.align-self-end.justify-content-md-end.align-items-md-end {
}

.border.rounded-0.border-secondary.shadow-sm.d-md-flex.align-self-end.justify-content-md-end.align-items-md-end {
}
.d-inline-flex{
display: flex;
justify-content: flex-end;
align-items: flex-end;
}
<div class="d-inline-flex" style="background-color: #141414;height: 400px;width: 100%;"><video class="border rounded-0 border-secondary shadow-sm d-md-flex align-self-end justify-content-md-end align-items-md-end" width="200" height="100" controls="" style="background-color: #e6e4e4;" preload="none" autoplay="" loop=""></video></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

Enhancing URLs with jQuery/AJAX: A Comprehensive Guide to Adding Parameters

Whenever I try to use the get method on an HTML form, the submitted data automatically appears in the URL. You can see what I mean here. Interestingly, when attempting to achieve the same result with JQuery and AJAX using the get method, the data doesn&apo ...

phpjavascriptjqueryhtmlajax

In PHP, specify the dimensions of an image

How can I specify the size to display the image as 400X400: height = 400 width = 400 Please provide the code for sizing it as 400X400, thanks. Below is the code snippet: <?php // Retrieve data from the people table $sql = "select * ...

phphtmlimageechoimage-size

Choosing <label> elements, while disregarding those <label> elements that include <input>

I need assistance with CSS rules to target only <label> elements that do not contain an <input> field inside of them. Is there a specific rule I can use for this? <label for="type">Regular Label</label> <label for="type"> ...

css

What is causing the QJsonValue(undefined) to be returned?

After sending a request to the API for bid price, I am receiving an undefined QJsonValue and unable to display it later. Can anyone help me pinpoint where I might be going wrong? { QApplication a(argc, argv); MainWindow w; w.show(); QNetwor ...

htmlc++qthttpasp.net-web-api

Adjustable background image with no need for a scroll bar

I am looking to create a static webpage that remains fullscreen without any scrolling. My goal is to have a centered form with the background image adjusting to the window size. As a beginner, I apologize if this request seems too simple. .container { ...

htmlcssimagescrollbackground

The background image within Bootstrap theme layouts appears to be missing from both the styles and divs

Encountering a peculiar dilemma here. Attempted to apply a background image to a custom style in order to override/extend a bootstrap column style. Additionally, tried embedding a style directly in the div attribute. Strangely, neither method seems to be e ...

htmlcssbootstrap-4

Strategies for avoiding unused style tags in React components

Expanding beyond React, I'm unsure if React itself is the culprit of this issue. In a React environment with TypeScript, I utilize CSS imports in component files to have specific stylesheets for each component. I assumed these styles would only be ad ...

javascriptcssreactjstypescript

Executing a function by click event using the onclick attribute from a file located in the public directory of my project (Next

I'm new to using Next.js and I have a question about how to utilize onclick to execute a function from an external file located in my public folder. Below is my index.js file: import Head from "next/head" import Script from "next/scrip ...

javascripthtmlnext.js

What is the best way to organize controls on my website?

My web page controls need to be organized in the specific layout below: Header Left Content - Main Content - Right Content Footer Is there a control available that can assist me with achieving this layout? I prefer not to use a table since it may not b ...

asp.nethtmlcss

Combining Sass and SCSS in webpack: A step-by-step guide

Just curious about something. I have some libraries I'm interested in using (for example, font-awesome) that use scss, but I personally prefer working with sass. How can I set up my project with webpack to accommodate this? Here's my current s ...

cssreactjswebpacksasswebpack-style-loader

Advancing in the Mozilla fashion

Having an issue with my progress bar design... When viewed in Chrome, the value of the progress bar appears in red due to CSS styling I applied... But when opened in Mozilla, it shows up as a dull grey color. progress[value] { width: 250px; height ...

htmlcss

Halt the Bootstrap carousel while entering text in a textarea

Is it possible to achieve this? I think so. I have created a carousel with a form inside. The form includes a textarea and a submit button. Currently, the slider does not slide if the mouse pointer is inside it, which is good. However, if the pointer is o ...

javascriptjqueryhtmltwitter-bootstrap

Tips on saving the background image URL value into a variable

How can I save the URL value of a background image in a variable? For example: image: url(images/9XkFhM8tRiuHXZRCKSdm_ny-2.jpg); I store this value as value = images/9XkFhM8tRiuHXZRCKSdm_ny-2.jpg in a variable and then use this variable in an href tag. ...

javascripthtml

Run a script on an ajax requested page prior to the page being loaded

My website navigation utilizes AJAX for seamless transitions between pages. Specifically, I have two pages: index.html and profile.html. The structure of both pages is as follows: <html> <head> <script src="script1.js" type="text/javascript ...

javascriptjqueryhtmlajax

Guide on setting an empty text box to be zero

Right below, you'll find a textbox that has been generated using this code snippet: $('#txtWeight').each( function() { var $this = $(this); var $weightText = $("<input type='text' class='txtWeightRow' maxle ...

jqueryhtml

trouble with overlapping mdl-sheet instances

Hey there! I have a quick question - Is it possible to have multiple mdl-sheets on one page that all share the same form? I tried implementing this but ended up with them overlapping each other instead of displaying next to each other from left to right. ...

jqueryhtmlcssmaterial-design-lite

Explain the usage of Razor syntax when defining the name attribute in HTML

Currently, I am utilizing MVC 5 and Razor 3 to dynamically generate an attribute name in HTML using Razor syntax. Specifically, I am focused on creating a data-* attribute. This pertains to determining the name of the attribute rather than its value. Her ...

c#htmlasp.net-mvcrazor

Develop a dynamic webpage using ASP.NET for enhanced interactivity

Currently, I am working with asp.net 2.0 and C#. I have a unique teacher-student dynamic in my platform, where I envision students receiving personalized pop-ups created by their respective teachers upon login. My challenge lies in providing teachers wit ...

asp.nethtmlpopup

Encountering issues with Stylus when trying to compile the `@font-face

I'm diving into the world of CSS compilers with Stylus for the first time, and I'm facing an issue with loading Google Web Font URLs correctly. Below is the code snippet causing trouble: @font-face { font-family: 'Roboto'; font-st ...

cssfont-facestylus

Is there a setting causing Webpack to not rebuild when there are changes to the CSS?

I have configured postcss-loader and style-loader on webpack, and I am using webpack-dev-server. However, every time I make changes to the CSS, webpack does not rebuild automatically. The script for webpack dev server that I use in npm scripts: webpack-d ...

cssnode.jswebpackwebpack-dev-server