The HTML video element only displays half of the video on Internet Explorer

Recently, I undertook a project that required me to replicate the exact content from https://www.google.com/atap/project-jacquard/.

The issue arose when I used a video tag to play a background video, as it only displayed half of the video in Internet Explorer while working perfectly fine on other browsers. The specific version of IE I am using is 11.0. Below is a screenshot depicting the problem.

I've spent some time investigating this problem but haven't been able to pinpoint where I went wrong. Any assistance in identifying my mistake would be greatly appreciated...

Furthermore, the footer is not responsive to different screen sizes.

Here is the snippet of the code I've been working with ->

Index.html


    <!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Project Jacquard</title>

    <!-- Bootstrap Core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="http://fonts.googleapis.com/css?family=Karla:400,700,400italic,700italic" rel="stylesheet">
    <!-- Custom CSS -->
    <link href="css/one-page-wonder.css" rel="stylesheet">
    <link href="css/yes.css" rel="stylesheet">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->


</head>

<body>

    <!-- Navigation -->
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container">

            <div class="navbar-header">

                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>


            <img id="img1" src="img/jacquard-row.svg" alt="Project Jacquard" class="ri" style=""><!--  width:22.5%; -->
            </div>


        </div>
        <!-- /.container -->
    </nav>

    <header class="header-image">
        <div class="headline" style="height: 850px;">

            <div class="container" id="content">
                <h2 style="padding-bottom: 20px;">Technology woven in.</h2>
                <button class="centerButton">Play Film</button>

            </div>

            <video class="vid" autoplay loop controls muted> <!--  id="bgvid"  style="width:1349; height:600;" -->
                <source src="video/Jacquard.mp4" type="video/mp4">
                    <img id="alternative" src="alternative.jpg" />
            </video> 
             <iframe style="margin-top: 60px;" class="vid" id="yt" src="https://www.youtube.com/embed/qObSFfdfe7I" frameborder="0" allowfullscreen></iframe> 
        </div>
    </header>

    <!-- Page Content -->
    ...

CSS file 1 ->


	body {
	    -webkit-animation-delay: 0.1s;
	    -webkit-animation-name: fontfix;
	    -webkit-animation-duration: 0.1s;
	    -webkit-animation-iteration-count: 1;
	    -webkit-animation-timing-function: linear;
	    overflow-x:hidden; }

	/*video {display: block;}*/

	@-webkit-keyframes fontfix {
	    from { opacity: 1; }
	    to   { opacity: 1; } }

	...

    #contact{
        background-color: rgba(230,230,230,.8); }

	ul {
	    list-style-type: none;
	    margin: 0;
	    padding: 0;
	    overflow: hidden; }

	li{
	    float: left;
        font-family: "Karla",sans-serif;
        font-size: 16px; }

	a {
        font-family: "Karla",sans-serif;
	    font-size: 16px;
	    display: block;
	    width: 100px;
	    color:#676767; }

	...

    .vid {
        min-width: 100%;
        min-height: 100%;
        width: auto;
        height: auto;
        object-fit: cover;
        z-index: -1;
        position: absolute;
        -webkit-transform: translateX(-50%) translateY(-50%);
        transform: translateX(-50%) translateY(-50%);
        background-size: cover; }

    #yt {
        display: none;
        z-index: 1; }

    #content { }

Answer №1

After some experimentation with the code, I managed to find the solution on my own. By adding this specific line to the .vid, the IE translation issue was resolved:

-ms-transform: translateX(0%) translateY(-50%);

This addition successfully covers the screen in IE as well. Hopefully, this information proves useful to anyone facing a similar challenge. Cheers!

Answer №2

After reviewing your code in comparison to the Project Jacquard website, it appears that there are a few CSS styles that you may have overlooked. In order to adjust your translations properly, make sure to include:

left: 50%;
top: 50%;

Keep in mind that the top positioning may not be required. The Project Jacquard page does not incorporate Y translation, so its necessity is uncertain.

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

AngularJS: Optimizing load times by consolidating all partial views/templates for production

My goal is to maintain views in a highly modular way. This entails using numerous small, generalized HTML snippets that come together to form the actual HTML page. While ng-include and custom directives with templateUrl work well for me during development, ...

Converting HTML to PDF using JavaScript

My goal is to create an HTML page and then print and download it locally as a PDF. However, when I try to generate the PDF, it cuts off the last 3 to 4 lines of the page. I want to create multiple PDF pages in A4 size with the same styling as the HTML pa ...

Update the background URL of a div element using an HTML tag

My question is about a CSS div with set dimensions and background that I want to change on hover. I am aware that this seems like a simple task, but what I really want to do is retrieve the background sources from within the HTML tag itself. For example: ...

The dropdown list in angularjs is failing to populate with options

For populating a dropdownlist using angularjs, I attempted the following: var app = angular.module('App', []); app.controller('UserSelection', function ($scope, $location) { var User = this; User.onSelectChange = function () { i ...

What is the proper way to integrate HTML code into an .inc file that is being utilized by a php file?

My title may be a bit off, but I have a PHP file that needs to include a .inc file containing menu code. Here is how I'm attempting to do it in the PHP file: <?php include_once("php_menu.inc") ?> And here is my HTML code for the menu: < ...

Having trouble with PHP SQLite3 functioning on the web server, but it works fine

I am facing an issue where my scripts are not running online on the server, despite working fine on localhost with XAMPP for testing. I have a few PHP files and a database '*.db' that I can share if needed... The scripts in PHP and SQLite are qu ...

What impact do varying screen sizes have on the width of CSS?

Can someone explain what this CSS code actually does: .class { width: 800px; } I've noticed that on my laptop screen, the element appears to be exactly 800 pixels wide. However, when I view it on my tablet screen, it shows up as 1600 pixels wide. Th ...

Angular 10: Oops! An issue occurred stating that the mat-form-field needs to have a MatFormFieldControl inside

When attempting to set up a form group on a page, I encountered the following error: ERROR Error: No value accessor for form control with name: 'modalidade' at _throwError (forms.js:2431) at setUpControl (forms.js:2339) at FormGroupDirective.addC ...

Is it feasible to overlay a PNG image on top of a button while still allowing the button to be clickable?

Can you place an image (.png) on top of a button and still make the button clickable? https://i.sstatic.net/9Z8nH.jpg ...

The NavLink in ReactJS is currently active

I am looking to understand how I can manage the className of a Navlink in React so that when the current path is X, the NavLink has the active class. In the past, I have accomplished this using Laravel and simple bootstrap, but I am unsure of how to achiev ...

Troubleshooting Flexbox Sticky Footer: Issue with 'Flex: 1' not properly filling the height

Currently experimenting with the flexbox sticky footer technique to create a dynamic-height footer, which has been a challenge for me. However, I'm facing an issue where the main section does not expand to fill the entire height of the window even aft ...

Connecting sound components in HTML with AngularJS

I'm having difficulty figuring out how to synchronize a function with the updates on a webpage. I currently have a checkbox that triggers a function when checked. Here is the HTML code: <input type="checkbox" value="data.id" id="status" ng-model ...

What is the largest image dimension allowed for website use?

What are the dimensions in pixels and file size in MB? I've been curious about this for a while, appreciate any insights! ...

Why is the jQuery class not responding to the is(:visible) selector?

Having trouble with this issue, I created a fiddle to demonstrate what I'm trying to achieve: http://jsfiddle.net/x2btM/9/ Below is the code snippet: <div id="ZodOneDragBox"> <div id="aquariusSelectedComp1" class="killSelectedComp1" sty ...

Tips for creating a div that gracefully fades out its background image when hovered over, while keeping the internal content unaffected

I am looking to create a hover effect on a div element that has a background-color, background-image, and text. What I want is for the background-image to slowly disappear when the div is hovered over, while keeping the text and background color visible. I ...

What could be causing me to receive null when trying to retrieve an element with document.getElementById, even after invoking $(document).ready(function() { ... })?

Here's a small example. I'm feeling a bit rusty with JavaScript, as it's been some time since I last worked with it. The problem I'm encountering is an error in Chrome developer tools: "Uncaught TypeError: Cannot set property 'src ...

Beside the element, a dropdown navigation menu emerges

Trying to work on a dropdown menu here. It appears to be functioning, but there's a small issue - the dropdown shows up on the right side of the element instead of directly below it. I have a feeling it has to do with either position or padding, but I ...

Ensure the menu bar remains at the top of the page without using the position:

Check out this awesome fiddle here! My menu bar looks great at the top, but for some reason it won't stay in place when the user scrolls down. I've tried adding position:fixed to the CSS under the first #cssmenu, but it messes everything up. Her ...

"Exploring the Connection Between PHP, JSON, and

In my current class, we are collaborating on an android app project for our school. Due to the lack of physical meetings, I haven't had direct contact with some of my classmates. One member of the group has been responsible for programming the json an ...

The functionality of the jQuery program is compromised when used on the Google Chrome browser

I just recently started diving into the world of Jquery, attempting to learn it from scratch. However, I have encountered an issue while trying to make my Jquery program run smoothly: Let's take a look at the CSS first: p { opacity: 0; } Now on ...