Adjust the width of HTML to accommodate the entire video while also specifying a custom height

After researching extensively on this solution, I am still unable to resolve the issue. My goal is to display a video with full width and a custom height of width='100%' height='100px'.

<div class="row">
    <div class="video-container">
        <video preload="auto" loop="" autoplay="" muted="" width="700px" height="50px">
            <source src="/uploads/MDclouds3-sunset.webmhd.webm"
                    type="video/webm">
            <source src="/uploads/MDclouds3-sunset-H.264-for-VP.m4v"
                    type="video/mp4">
        </video>
    </div>
</div>

Could someone please advise me on how to achieve this? Thank you in advance.

htmlcss

Answer №1

To properly size and display the video, 'object-fit' must be used.

For different needs, consider using either object-fit: fill or object-fit: contain:

https://example.com/video-styling-tips

Keep in mind that for object-fit: cover, a container with dimensions of width: 100%; height: 100px; is necessary along with setting overflow:hidden;.

Answer №2

Below is the code snippet that you need to include in your CSS file:

.video-class {
  width: 100%    !important;
  height: 200px  !important;
}

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

Troubleshooting: Implementing JavaScript to dynamically append elements to a list on a webpage

Can someone help me troubleshoot why my Chrome extension isn't working properly? I'm trying to create a simple To-do list extension for myself using the code below: HTML: <html> <head> <link rel="stylesheet" typ ...

javascripthtmlappend

Scrape tags from the web using Python's Selenium for a unique collection

Hello there! I appreciate you taking the time to read through this. I'm currently navigating my way through Python and Selenium, specifically attempting to crawl web pages like this one and others of a similar nature. One challenge I've come acro ...

pythonhtmlseleniumxpath

Guide to configuring capybara-webkit for testing ajax requests and capturing screenshots containing HTML with loaded CSS and JavaScript

Having some trouble setting up capybara-webkit on my Rails 4.2.1 app. Tests are running fine, links are being clicked, and ajax calls are working, but there's one odd issue with capybara-screenshot gem. I wanted to capture html screenshots with all as ...

cssruby-on-railsajaxasset-pipelinecapybara-webkit

Move the footer to the bottom of the page

Is there a way to position my footer at the bottom of the screen and make it extend to the full width in a responsive manner? https://i.sstatic.net/19lSB.jpg Custom CSS for Footer: * { margin: 0; } html, body { height: 100%; } .page-wrap { min-heig ...

javascripthtmlcssreactjsmaterial-ui

Issue with closing the active modal in Angular TypeScript

Can you help me fix the issue with closing the modal window? I have written a function, but the button does not respond when clicked. Close Button: <button type="submit" (click)="activeModal.close()" ...

htmlangulartypescript

Capture various data points in an array with each click

I am currently working on a menu of buttons where users can select multiple options at the same time. My goal is to record all selected buttons in one array instead of individual arrays for each button. The end result I hope to achieve is an array like t ...

javascripthtmljqueryarrays

Determine all checkboxes in a table that are selected if the rows contain a display style tag using Javascript

Currently, I have a basic text filter that assigns a display property to rows in a table either as "none" or "table-row". My challenge lies in trying to modify my "select all" script so that it only interacts with the checkboxes that are visible on the pag ...

javascripthtml

I am struggling to capture the user's input and display it on a webpage using HTML and JavaScript. Can you help me identify where I may be going wrong in this process?

Good day! I am fairly new to the programming world and have recently embarked on my first JavaScript project. I've chosen to create a simple budgeting app. However, I'm struggling with displaying user input on the page. Something seems off with ...

javascripthtmlforms

The bottom section is not displaying properly at the conclusion of the div slide

The division ends without displaying the footer. <div id="fullpage"> <div class="section " id="section0"> content1 </div> <div class="section " id="section0"> content1 </div> <div class="section " id="section0"> c ...

jqueryhtmlcssfullpage.js

Issue with IE 8 compatibility and jquery

Here is the setup of my div: <div class="container"> <div id="myid" style="display:hidden;"> <p>some stuff here</p></div> </div> When I run the command $("myid").slideToggle("slow"); on the above html code (where " ...

jqueryhtmlcss

The bubble dialogue box in my picture

Looking to create a panel with images that, when clicked on, display an info window similar to Google Map's pin maker. When you click on an image, a balloon should appear containing additional information. Check out this example <a id="infowindow ...

jquerycsszurb-foundation

Working with files in JavaScript

Has anyone ever tried to create an HTML file in the same directory using JavaScript? I did some research on Google and came across using ActiveXObject like this: var fso = new ActiveXObject("Scripting.FileSystemObject"); var FileObject = fso.OpenTextFile( ...

javascripthtmlfile-handling

Tips for creating a toggle menu using JavaScript

I am trying to create a toggle menu using CSS and JavaScript, but I have encountered an issue where clicking on the bars displays the navbar, but then the bars disappear and there is no option to close the navbar. <a href="#" class="fas ...

javascripthtmlcss

Enhance image with Fancybox on mouse click

I need to display several images in the content area of a page, and when a user clicks on an image, it should enlarge using fancybox. If an image is large, the user should be able to click on it to view an enlarged version in a fancy box. Both the thumbn ...

javascriptjquerycssfancyboxfancybox-2

Populate the table with JSON object information

I've structured a table as follows: <div class="row"> <div class="row"> <table class="table table-bordered table-striped tree-grid"> <thead class="text-primary"> <tr> <th> ...

htmlangularjsjson

The full-width of the Bootstrap 4 container-fluid is affected when the default padding is removed

Trying to create a full-width webpage using Bootstrap 4. Attempting to eliminate the default 15px padding of container-fluid, but encountering issues. Check out the details on jsfiddle. The background is set as purple, yet the jumbotron does not fully co ...

cssbootstrap-4

What is the best way to assign names to images in a Rails application?

When working in html, you can use the code <img class="myimage" src="image.jpg"> to make editing in .css simpler. But what is the equivalent of this when dealing with a .html.erb file? For example, where should I define the class in this <%= imag ...

htmlcssruby-on-railsruby

Python web scraper unable to locate specified Xpath

My question was previously posted here: Xpath pulling number in table but nothing after next span In testing, I successfully located the desired number using an XPath checker plugin in Firefox. The extracted results are displayed below. Although the XPa ...

pythonhtmlseleniumxpathselenium-webdriver

What is the best way to adjust the padding on the left and right of the Bootstrap navbar logo and menu items?

I am currently facing an issue with the alignment of the logo and menu on my website. They are currently aligned to the far edges of the screen, and I would like them to remain a set percentage distance away from the extremes, rather than an absolute dista ...

javascripthtmljquerycssbootstrap-4

Code for a succinct MySQL query in PHP using associative arrays

I'm trying to query multiple times like this: <?php $datacenter=mysqli_connect('localhost','user','pass','db'); After the DB connection, I want to count the number of votes for options 1, 2, and 3. $r11= ...

javascriptphphtmlcssmysql