Tips for centering a video vertically within a cell

I need assistance with aligning a video in the center of a fixed height cell while hiding the overflow at the top and bottom.

Here is what I have so far:

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td height="150" style="display: block; overflow: hidden; vertical-align: middle;">
    <div style="position: relative;">
      <video autoplay loop width="100%" style="display: block;">
        <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
      </video>
    </div>
    </td>
  </tr>
</table>

However, the "vertical-align: middle;" in the "td" tag does not seem to be working as expected.

I want only the middle 150 pixels to be visible, but it currently shows the top 150...

If anyone can provide guidance, here is a link to my JSfiddle example: https://jsfiddle.net/xtxkm02a/1/

Thank you.

htmlcsshtml5-video

Answer №1

Take a look at this code snippet that complements my previous comment:

table {
  height: 300px;
  border: 1px solid #000;
}
table td {
  border: 1px solid #f00;
  overflow: hidden; 
  vertical-align: middle;
  height: 30px;
}
.video {
  overflow: hidden;
  height: 150px;
}
.video video {
  width: 100%;
  margin-top: -75px;
}
<table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td valign="center" style="">
            <div class="video">
                <video loop>
                    <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
                </video>
            </div>
        </td>
    </tr>
</table>

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

What are some methods for preventing JavaScript function calls from the browser console?

In the process of developing a web application using HTML and JavaScript, I'm looking for a way to prevent users from accessing functions through their browser console in order to maintain fairness and avoid cheating. The functions I want to protect a ...

javascripthtml

Instructions on passing a PHP variable as a parameter to a JavaScript function when a button is clicked

In my implementation of codeigniter 3, I have a view page where the data from $row->poll_question is fetched from the database. The different values within this variable are displayed on the voting.php page. Next to this display, there is a button labeled ...

javascriptphpjqueryhtmlcodeigniter

Can someone please help me figure out why the "setInterval" function in my script isn't functioning as expected?

I've been experimenting with controlling the refresh rate of drawn objects in a canvas using JavaScript. Even after going through the tutorials and examples on w3.school, I'm still unsure why the "setInterval" function is not executing the "gener ...

javascripthtmlcss

The issue of CSS Grid not adapting fully to different screen sizes and

Recently, I took on a coding challenge from Frontend Mentor (this one) and managed to complete it successfully. However, the grid I designed is not fully responsive. It only adapts correctly when the page width matches the media query specifications. The c ...

htmlcss

What is the best way to display long text in a browser alert without it being cut off?

Seeking to display a large amount of data in an alert box, but only a portion is currently visible. The following text is all that can be seen: ["19467,1496257152583","19227,1496256651094","19469,1496257033968","17285, ...

javascriptjqueryhtmlbrowseralert

What sets srcset apart from media queries?

Can you explain the contrast between srcset and media query? In your opinion, which is more optimal and what scenarios are ideal for each? Appreciate it! ...

javascripthtmlcssmedia-queriessrcset

What are the steps for positioning tables using HTML?

As a newcomer to this field (literally just started two days ago), I have managed to generate tables from an XML file using my XSL file. However, aligning these tables properly has become a bit of a challenge. I initially used the align attribute of <ta ...

htmlcss

"Implementing a Modular CSS Approach and Uniform Styling Across Your App

How can we handle the scenario of implementing specific styling for h1 tags within a modular CSS approach? In the past, this would have been achieved through inheritance in a single stylesheet. For example: .h1 { font-size: 3rem; /* more styles */ } .h2 { ...

cssreactjscss-modulesreact-css-modules

Angular 2 Component attribute masking

In my Angular 2 component called Foobar, I have defined a property named foobar: import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-foobar', templateUrl: './foobar.component ...

htmlangulartypescript

CSS - Update BackgroundColor Depending on Child Element Color

Is there an official CSS way to change the background color based on the child element in HEX? For example: render() { return ( ... <span> <h3 style={{ color: item.color }}>Item Color</h3> </span> ...

cssreactjs

no visible text displayed within an input-label field

Currently, I have started working on a multi-step form that is designed to be very simple and clean. However, I am facing an issue where nothing is being displayed when I click on the next arrow. I am puzzled as to why it's not even displaying the te ...

javascripthtmlcssreactjs

Is it possible to manipulate an Angular #variableName in order to retrieve an ElementRef for an HTML element?

Suppose I have a scenario where I create a button like this: <button #myButton>My Button</button> ...and then use ViewChild in the following way: @ViewChild('myButton', { static: true }) createButton: ElementRef; In this case, creat ...

javascripthtmlangulartypescriptangular-material

I am interested in displaying or hiding a table depending on a specific condition in MVC 4

Looking at this MVC 4 Razor code snippet: <h4>You have @Model.Count() items up for sale currently. @Html.ActionLink("Add a new listing by clicking here", "Create")</h4> <br /> <table style="visibility: hidden"> .... I am seeking ...

asp.net-mvchtmlasp.net-mvc-4

Tips for aligning the Bootstrap inline form in the center of the webpage

Is there a way to center align my form in such a way that the input box and button appear in the same row? I've tried the code below, but for some reason they don't display inline. Can anyone provide a code sample to help me achieve this? Your as ...

htmlcssformsbootstrap-4inline

The image does not properly scale within the div as it rotates

I am currently attempting to use jQuery to rotate an image, but I am facing an issue. When I rotate the image left or right, a portion of it extends beyond the frame. The image is not resizing based on the CSS properties set as max-height: 100%; max-width: ...

jqueryhtmlcss

Animate the expansion and shrinkage of a div instantly using jQuery

I am trying to create an animation effect using jQuery animate on a div element where it starts large and then becomes smaller. Here is the code I have written: $(this).animate({ opacity: 0, top: "-=100", width: "38px", height: "32px" }, 1 ...

javascriptjquerycss

Ensure that Mathjax underscores are consistent with the height of other characters

Presented below is the latex code being used with Mathjax. \class{mathjaxCursor}{\text{_}} ...and here is the accompanying css: .mathjaxCursor { font-weight: bold; background-color: red; } This setup results in the following display: ...

htmlcssmathjax

I am having difficulty accessing specific data in JSON using Searchkit's RefinementListFilter

Utilizing searchkit for a website, I am encountering issues accessing previously converted data in json format. The structure of my json directory is as follows: (...) hits: 0: _index: content _type: content _source: ...

javascripthtmljsonreactjssearchkit

I'm having trouble aligning this div in the center of the screen. It looks like the position is slightly off

<!DOCTYPE html> <html> <head> <style> body { background-color: #7a64fa; } .container { background-color: #ffffff; position: fixed; top: 50%; left: 50%; margin-top: -50px; ...

htmlcss

Enter your phone number in the designated field

I am looking to receive mobile numbers from various countries as input. I attempted to achieve this using the following code: <input type="tel" minlength="8" maxlength="10" name="Number" id="Number" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}" class="form-co ...

htmlvalidationbootstrap-4