Tips for adjusting the <object> video to perfectly match the width and height of its parent container

<div id="player" width='2000px' height='600px'>
<object  id="pl" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6">
    <param name='url' value='Video/3.mp4'/>
    <param name='ShowControls' value='-1' />
    <param name='ShowDisplay' value='-1' />   
    <param name='ShowStatusBar' value='-1' />
    <param name='stretchToFit' value='0' />
    <param name='uiMode' value='none' />  
</object>
 </div>

Is there a way to adjust the dimensions of the video to fit inside the "player" container? I am interested in stretching the video to fit better.

javascripthtmlcssvideo

Answer №1

Below are the CSS lines needed for it to function:

#player {
    width: 2000px;
    height: 600px;
}
#pl {
    height: 100%;
    width: 100%;
}

Just a heads up, avoid setting the width and height attributes on a div element. Instead, use CSS rules or the style attribute to size the div element.

You can experiment with my solution on this jsfiddle.

Cheers, Thomas.

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

Is it considered a bad practice to reference node_modules directly in the src path?

I'm attempting to access a woff file from a npm package called 'extras', but it seems like the URL prefixes the string with './'. When I remove the url() and just try the string/parameter, it still doesn't work. Should I navi ...

htmlcssreactjstypescriptnpm

Is there a way to retrieve the height of an image and adjust its parent container height to be automatic?

Is there a way to achieve the following using pure JavaScript instead of jQuery? I want to find the height of an image within a figure element and if the image's height is less than 200 pixels, I need to set its container's (parent's) heigh ...

javascripthtmlcss

Having issues with the crucial npm installation of @babel/plugin-transform-react-jsx

Apologies for the inconvenience, but this is my first post. I encountered an issue during npm start, and received this error message: /Users/hp/Desktop/Wszystkie Projekty/ravenous/src/components/BusinessList/BusinessList.js SyntaxError: C:\Users\ ...

javascriptreactjsnpmbabeljsnpm-install

Issues with zDepth functionality in Material-UI (React.js) not being functional

Can anyone explain the concept of zDepth to me? I have a component with the following render method: render() { return ( <div> <AppBar zDepth={2} title="Some title" iconElementLeft={<IconButton onClick={this ...

javascriptreactjsmaterial-ui

AngularJS: Monitoring $locationChangeStart for token verification

I am attempting to check if the next has a token or not, but it is not working and I am getting an error: TypeError: Cannot read property 'next' of undefined Any suggestions? app.js .run(function ($rootScope, $location,$log,User) { ...

javascriptangularjstoken

What could be causing the misalignment of a button within a Bootstrap navbar?

I'm struggling with aligning the log out button correctly in the navigation bar with a dropdown. I have tried every structure suggested on the Bootstrap documentation page to no avail. Can anyone provide guidance on how to vertically align it properly ...

htmltwitter-bootstrapbootstrap-5

My Jquery CSS Checkbox is failing to register when it's checked

I have implemented custom checkboxes using a custom CSS checkbox generator. $( ".button" ).click(function() { if(document.getElementById('terms_checkbox').checked) { alert('Checkbox is checked'); } else { alert('Chec ...

jquerycss

Getting started with TinyMCE in Nuxt: A step-by-step guide

I need to incorporate this script into my Nuxt code: <script> tinymce.init({ selector: "#mytextarea", plugins: "emoticons", toolbar: "emoticons", toolbar_location: "bottom", menubar: false ...

javascriptvue.jstinymcenuxt.jsscript-tag

Initiating a AJAX upload upon selection of a specific option from a select menu

Recently, I have been exploring ways to enhance my layout page by implementing an option for users to upload new logos on the spot. Currently, users are able to choose their desired image through a drop-down selection feature. I am interested in adding a f ...

javascriptjqueryajaxuploadajax-upload

Implement lazy loading of content on scroll in Grails framework

Currently, I am uploading images and displaying them in a gsp view. My goal now is to implement a functionality where the images load as I scroll down on the page. A friend suggested using jQuery to make an ajax call for this. Can someone please provide g ...

javascriptjqueryajaxgrails

Fetching the entire webpage

When attempting to load a specific webpage using an iframe, I encountered the following issue: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title></ ...

html

Listen for the modified value in a directive with AngularJS

I am currently working on implementing a directive that can draw a chart based on specified values. What I am aiming for is to pass the data necessary for the plot directly from the template rather than using ng-model, as my current solution requires. I ...

javascriptangularjsangularjs-directiveangularjs-scopeangularjs-filter

Using jQuery to retrieve the element that triggers a function

Greetings! I am new to using jQuery and I am looking to access an element that I have clicked on. My goal is to navigate to neighboring elements and retrieve their values. <td>21</td> <td>Peter</td> <td>Admin</td> <t ...

jqueryhtmlfunction

Problem with Bootstrap 5 dropdown menu: Functional on main page, but failing on subpages

As a beginner with Bootstrap, I recently attempted to integrate a dropdown menu into my website by following the Bootstrap documentation (version 5.1) for guidance. While the dropdown menu functions correctly on the homepage, it fails to work properly on ...

htmlbootstrap-5

Display a pair of divs by utilizing the select option tag element alongside a submit button

Yesterday, I posted a similar question in a different format. Today, I am looking for the same question in a new format. Let me explain: I have several div elements on a page. When I choose an option from a dropdown menu and click submit, I want to disp ...

jqueryhtml

Tips for Importing HTML Table Data Line by Line into SQL Table

I have the following code here. I am looking to insert HTML table data row by row into an SQL database. However, with this current code, only the last row is being stored in the database table. I believe I need to implement a loop to read the data from e ...

phphtmlsql

What is the best way to restrict the creation of objects in a JavaScript list?

Experiencing a fun challenge with HTML coding! Take a look at my ordered list in HTML: <ol id="myList"> <li>Tea</li> <li>Milk</li> <li>Water</li> </ol> <button onclick="myFunction()">Try it</ ...

javascripthtml

Learning how to invoke a JavaScript function from a Ruby on Rails layout

In the file app/views/download.js.erb, I have defined a javascript function named timeout(). This function continuously polls a specific location on the server to check if a file is ready for download. I am currently running this function as a background ...

javascriptjqueryruby-on-railsrubyajax

Outer div encapsulating inner div within its boundaries

I am looking for a solution where the inner div stays fully contained within the outer div, without overflowing and overlapping with the padding of the outer div. Here is a code sample that demonstrates the issue .inner { /* Overflow */ overflow-wra ...

javascripthtmlcss

I am interested in turning a div to complete a full 360-degree rotation

I am working on a layout where I have a square and inside it, a circle. The square is positioned absolutely and the circle is positioned relatively, centered within the square. However, when I rotate the circle using the rotate property, it loses its cente ...

htmlcsscss-transitions