The video is not displaying on my website

I recently added a video to my webpage that is 3:48 minutes long. However, even though I have the navigation bar and sound in place, the video does not seem to be displaying properly. Here is an image of how it appears:

https://i.stack.imgur.com/HeN41.png

Below is the snippet of my HTML:

<video height="90%" width="90%" class="demoVideo" controls><source src="video.mp4" type="video/mp4">

And here is the corresponding CSS:

.demoVideo {
    position: fixed;
    z-index: 20;
    background-color: transparent;
    max-width: 77.083333333333%;
    max-height: 77.12962962963%;
    margin-left: 11.458333333333%;
    top: 11.111111111111%;
    border: 1px white solid;
}

You can also view the Video Codec information by clicking on the following link:

https://i.stack.imgur.com/H8pMQ.png

htmlcssvideo

Answer №1

Could you confirm the video codec that was used to record your .mp4 file?

Many of the most recent web browsers now have built-in support for the MP4 container format, along with the H.264 video codec and AAC audio codec.

Visit this link for more information on supported media formats in HTML

To check the codec details of your video file, you can open it using VLC Media Player. Navigate to Window > Media Information and click on Codec details to view the video and sound codec information.

Answer №2

Encountering a similar issue and experiencing the same setback, I decided to tackle it by converting the avi file into webm format instead of mp4. Surprisingly, this simple switch resolved the problem without having to delve into detailed knowledge about codecs. Sometimes a straightforward solution is all that's needed.

Answer №3

try out this code snippet

<video height="500" width="500" class="demoVideo" controls>
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

with the following CSS styling:

.demoVideo {
position: fixed;
z-index: 20;
background-color: transparent;
min-width: 75%;
min-height: 75%;
margin-left: 10%;
top: 10%;
border: 1px white solid;
}

For more information, check out the following link:

http://www.w3schools.com/html/html5_video.asp

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

Using Wordpress? Customize your sidebar with three widgets and don't forget to add the "last" class to the third one for a polished look

Successfully set up a custom sidebar on my WordPress website and configured it to display three widgets. The CSS for the sidebar includes a specific styling for each widget, with an additional class to remove margin-right from the last (third) widget. reg ...

phpcsswidgetwordpress

Is there a way to create a Swipe slideshow without relying on plugins or external tools?

How can I create a responsive swipe image slideshow using CSS and JQuery that changes the image when swiping from right to left? I want it to work seamlessly on both computer and mobile screens. ...

jqueryhtmlcss

Stringified HTML code showcased

When working with Angular, I have encountered an issue where I am calling a function inside an .html file that returns a string containing a table element. My goal is to convert this string into HTML code. I attempted to use [innerHtml]: <p [innerHtml ...

htmlangulartypescript

The height of the division is either inadequate or excessive when set at 100%

After making progress, I hit a roadblock that has me stumped. The issue I'm facing is with the wrapper height setting. If I set it to auto, it stops at the bottom of the content, leaving the background exposed when the content is shorter than the win ...

htmlcss

JavaScript: create a button that dynamically changes size and color when scrolling

I have a pulsing button (#scrollarrow) at the bottom of my website that disappears as I start scrolling. The jQuery code responsible for this effect is as follows: $(document).ready(function(){ $(window).scroll(function(){ if ($(thi ...

javascriptjqueryhtmlcss

Automatically updating the JavaScript content on a webpage without having to refresh the entire HTML page, based on the changing

Is there a way to adjust the opacity change rate of my nav bar automatically without the need to refresh the page? The current opacity change rate is based on the width of the window, but once the page is loaded, adjusting the width does not affect the rat ...

javascriptjqueryhtmlcss

HTML/CSS flowchart illustration

Is there a user-friendly method to create a flow or swimline diagram without relying on scripting or tables? Specifically, I'm looking for a way to display different hosts sending packets (with hosts along the X axis, time along the Y axis, and arrows ...

htmlcssdiagram

Make the background disappear when the text field is left empty and the cursor is not present (onUnfocus)

When the text field is empty and there is no cursor in the text field, I want it to be transparent and for the spell checker not working. The result should be displayed a little to the left inside a <div>. Should this be done using CSS, JavaScript, ...

javascriptphpjqueryhtmlcss

Using CSS box-shadow to elevate an image

I am looking to create a background wrapper using CSS instead of an image. My goal is to add box shadow to achieve the same look as shown in the attached image. I understand that I will need to use the box-shadow property for this task. However, I am uns ...

htmlcss

Tips for Implementing CSS Styles on Ruby on Rails HTML Pages

Just starting out with RoR and trying to customize my form with CSS classes. Here's what I have so far: <%= form_tag :action => 'create' do %> <p><label for = "name">Name</label>: <%= text_field ...

htmlcssruby-on-railsruby

I'm having trouble getting my .click method to work with the <div id=menuButton>. Can anyone help me figure out why this is happening?

Here is the HTML code I created for a dropdown menu. Initially, in the CSS file, the menu is set to display: none; <!doctype html> <html> <head> <title>DropDown Menu</title> <link rel="stylesheet" href="normalize ...

javascriptjqueryhtmlcss

When using Angular 8 with RxJs, triggering API calls on click events will automatically detach if the API server is offline

I have an Angular 8 application with a form containing a save button that triggers a call to a Spring Boot microservice using RxJs. I decided to test what would happen if the Rest API server were down. When the Rest API is running, clicking the button wor ...

htmlangularspring-bootrxjs

Issue with pop-up functionality on web page using HTML, CSS, and JavaScript

Recently, I created a unique popup using HTML. You can see the complete code (excluding CSS) here: https://codepen.io/nope99675/pen/BawrdBX. Below is the snippet of the HTML: <!DOCTYPE html> <html> <head> <meta charset=&quo ...

javascripthtmlcsswebencoding

Conceal HTML code from being displayed on a mobile device

After successfully displaying an element on mobile, I am now trying to hide it on the same platform. While I know this can be achieved with CSS using the display:none property, I want to explore alternative methods that do not involve creating unique CSS r ...

phphtml

Tips for updating the hover background color of a table row with a unique class in bootstrap

Modified: Here is the table along with its corresponding CSS styling: .table-hover tbody tr:hover { background-color: #fff !important; } <html lang="en"> <head> <meta charset="utf-8" /> <meta name="v ...

cssbootstrap-5

JQuery modal for creating vibrant and personalized color schemes

I have a basic jQuery modal code that uses grey as the default color. How can I customize this to create a colorful toolbox, for example changing the color from grey to blue? Also, how can I use this script for multiple dialogs, like setting #dialog1 to be ...

jqueryhtml

Using jQuery to remove the td element from an HTML table

Hello everyone, I have a query. I am trying to remove a specific td from a table using JavaScript, but the remove() function is not working. Here is my code: $('.btnEliminarLicencia').off('click'); $('.btnEliminarLicencia&apo ...

javascriptjqueryhtmlajaxjsp

using javascript to create two choices

I am facing a small complication between two select options in my javascript code. Here is the snippet of my javascript: function displayVals() { var singleValues = $("select option:selected").text(); //to stay selected $("#hiddenselect").val(s ...

javascriptjqueryhtml

"Enhance your images with dynamic captions using jQuery

Struggling to create an image caption that only appears when hovering over the specific image? Not sure how to select the correct object? The caption is working, but it's appearing for all images at once. I have attempted to target a single image wit ...

jqueryhtmlcss

Issue with BeautifulSoup(page.content,'html.parser') not returning accurate content during web scraping

While attempting to scrape data from the AJIO website, I encountered an issue where the content retrieved by Python did not match what I saw when inspecting the exact webpage. It appears that there is some JavaScript code present on the page which dynamica ...

pythonhtmlweb-scraping