Positioning a video element in the center using the margin property with a value of 0 and

I'm having trouble getting this video element centered on my webpage. Here's the code snippet I've been working with:

HTML 

<div id="container">
    <video id="vid" x-webkit-airplay="allow" controls width="640" height="360" src="http://ec2-184-72-239-149.compute-1.amazonaws.com:1935/demos/smil:bigbuckbunnyiphone.smil/playlist.m3u8"></video>
</div>

CSS

#vid {
    margin: 0 auto;
}

You can see the full code on this jsfiddle link. Can anyone help me figure out why my <video> element is not centering itself?

htmlcsshtml5-video

Answer №1

Make sure to include display: block in the styling for your video element with the ID of #vid

Answer №2

Revised Version:

#vid {
    margin: 0 auto;
    display: block;
}

It is probable that the HTML5 specification is not yet complete, as I believe <video> should be treated as a block or inline-block element.

Answer №3

<div id="video-container">
   <div class="video-wrapper"> <video id="video-player" x-webkit-airplay="allow" controls width="640" height="360"
       src="http://example.com/video.m3u8"></video></div>
</div>

Custom CSS:

.video-wrapper {
    margin: 0 auto;
    width: 640px;
}

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

html elements correspond directly to individual json objects

Looking for a precise way in javascript/jquery to connect objects created in an external JSON file to populate their respective HTML divs. The code snippet and JSON data are provided below, along with an image for reference that shows the layout of the div ...

javascriptjqueryhtmlcssjson

Angular React Form: Issue locating control within deeply nested FormArray structure

I am currently developing a nested, dynamic form where users can create groups and nest conditions within those groups or add new group objects within a `group` FormArray. The UI prototype is still under development, with some pieces not fully functional y ...

javascripthtmlangular

What is the method for placing an image beside text in javascript?

I need help creating a Sign In button similar to the one on YouTube, with an image on the left and text on the right. After attempting the code below, I realized that the image does not display as intended when executed. How can I successfully position t ...

javascripthtmlcss

What is the best method for transforming this table design into a div structure?

After being told by a friend to try using the div layout, I've been struggling to make it work for my needs. My goal is to achieve the layout shown in the diagram below: +-----------------------------------------+ | Fixed Height = 50 ...

htmlcss

Unlocking the potential of Bootstrap 4 pop ups and modals within an Angular 6 project

Angular.json "styles": [ "./node_modules/bootstrap/dist/css/bootstrap.min.css", "./node_modules/ngx-bootstrap/datepicker/bs-datepicker.css", "src/styles.css" ], ...

cssangularmodelbootstrap-4mean-stack

Display an image from a Google image search when hovering over a specified data attribute

My goal is to add a code snippet that will assign a class of "hoverme" to a table cell. When a user hovers over that cell, an ajax query will be triggered using the data attribute containing information stored there to perform a Google search. Below is a ...

phpjqueryhtmlmysqlajax

Capture images with html2canvas in HTML

I am currently working on converting HTML to an image using html2canvas. I have encountered an issue where Arabic characters are not being converted correctly! </html> <body dir="rtl"> <a class="STO_one" href="#"> <span& ...

javascriptphphtmlcanvashtml2canvas

What is the best way to apply a specific style based on the book ID or card ID when a click event occurs on a specific card in vue.js

My latest project involves creating a page that displays a variety of books, with the data being fetched from a backend API and presented as cards. Each book card features two button sections: the first section includes "ADD TO BAG" and "WISHLIST" buttons ...

javascriptcssvue.jsvuejs2

Fading in and out numerous DIVs with the magic touch of jQuery

Can you lend a hand with my jQuery dilemma? My brain is fried just thinking about it. This is the structure I'm dealing with: <div id="trigger-1">Trigger 1</div> <div id="trigger-2">Trigger 2</div> <div id="trigger-3">T ...

jqueryhtmlfadeinfadeout

Selenium fails to recognize text

I recently embarked on the journey of learning selenium. I wrote a small snippet of code where I attempted to fetch the price of an item on Amazon. driver = webdriver.Chrome() link = "https://www.amazon.it/AMD-Ryzen-5-3600-Processori/dp/B07STGGQ18 ...

pythonhtmlseleniumwebselenium-webdriver

Troubleshooting issue arising from transferring code from CodePen to a text editor

I've attempted to recreate a Codepen example in my HTML files on my computer, but it's not displaying correctly. While the static layout resembles what appears in Codepen, the background with the moving squares isn't functioning as expected ...

htmlcss

Enhancing speed and efficiency when zooming in on various elements using React

Issue: The zoom functionality in my React application becomes sluggish when I have over 20 components rendered. The app needs to handle zooming with thousands of components being rendered. Current zoom implementation: Currently, in my application, there ...

javascriptcssreactjsperformancezooming

The Jquery click event is not triggering when clicked from a hyperlink reference

I have a specific HTML href in my code snippet: <a id="m_MC_hl6_8" class="no_loaderbox button_link inline_block " href="somelink" target="_self">link</a> Upon clicking this link, a waiting box is displayed on the page. However, I don't ...

javascriptjqueryhtml

An anchor-shaped name tag with a touch of flair

I stumbled upon this unique anchor name design on the website Does anyone here know how to create something similar? What is that style called? ...

javascriptjqueryhtmlajaxjson

Interactive Radio Buttons with Visual Images

I'm exploring how to implement a set of images that function similar to radio buttons. The idea is that when a user clicks on an image, a check mark would be displayed below it to indicate selection. I think I can achieve this using an onclick event a ...

c#jqueryasp.nethtmlcss

Tips for showcasing content by hovering over buttons with the help of Bootstrap3 and Jquery

My code and fiddle are currently set up to display buttons when hovered over, but I want to modify it so that only the relevant button is displayed when a specific text is hovered over. For example, if "Water" is hovered over, only the button for Water sho ...

javascripthtmljquerycss

What is causing the malfunction of the Bootstrap 4 Toggle button?

I have integrated Laravel 5.8 and Bootstrap 4 into my project using npm, and I have the toggle button in my blade file as shown below: <button class="btn btn-primary" id="menu-toggle">Toggle Menu</button> <button cl ...

javascripthtmljquerycssbootstrap-4

Do not delete blank notes upon saving

Issue: When multiple notes are created simultaneously, and the same text is entered in the first note and saved, the blank remaining notes are not removed upon page reload or refresh. How can I ensure that empty notes are deleted and only notes with conten ...

javascripthtmljquerycss

CSS-PURGE: Configuration is being overlooked

I am utilizing CSS-PURGE to analyze CSS and provide feedback on potential improvements. In order to generate a report, I have configured it as follows: { "options": { "generate_report": true, "report_file_location": "purged_css_report_data.json" ...

cssreportcss-purge

"Utilize CSS for animating list items within a ul

Having an unordered list, I would like to iterate through each list item one by one. My current solution is somewhat functional, but upon close inspection, you can observe that when it reaches "item 4," it starts overlapping with "item 1" and becomes incon ...

cssanimation