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 might be causing Flex not to function properly on my personalized landing page?

I attempted to create a basic landing page featuring an image background with a logo, button, and a row of 4 images displayed side by side using Flex. However, for some reason, the Flex is not functioning properly for the row of images. Here is the code s ...

htmlcssflexbox

Altering the Size of Text in HTML

Currently I am working on my website and the title appears as follows <h1><font face="tempus sans itc" color="White"><div style="text-align:center">Welcome To My Website. View My Projects Here</h1></div> Is there a way to in ...

html

Retrieve data in JSON format from an external source file

I've been attempting to retrieve JSON content from an external file named list.json, but unfortunately all of my efforts have been unsuccessful. I've created a prototype of my code on Jsfiddle (http://jsfiddle.net/ctmvcyy1/). I believe that the ...

javascriptphpjqueryhtmljson

Tips for adding a CSS marker to the Videogular timeline at a designated time

My HTML player application allows users to search for a term and then displays the results along with the time when those words appear. By clicking on a specific sentence, the HTML player will start playing from that location. However, I would like to enha ...

javascripthtmlcssangularjsvideogular

Conceal the div until the animation with a delay of `1s` has finished, then reveal it afterwards

I have incorporated a CSS file to introduce animations on the website I am currently developing. You can find it here: The premise of this CSS file is straightforward - by adding specific class names to div elements, you can animate them as you scroll up ...

javascriptjqueryhtmlcssfrontend

Designing a flexible layout that allows for both vertical and horizontal scrolling of content

I have successfully implemented a flexbox layout with fixed header, fixed footer, fixed menu, and scrolling content based on resources from various articles and Stack Overflow answers. However, I am facing difficulty in achieving horizontal scrolling for ...

htmlcssflexbox

Which component from the Bootstrap library would be best suited for my needs?

I am looking to create a basic 6-page website. Here is the code for my main page: <html> <style> .ali{ width:170px; text-align:center; } footer{ background:#333; color:#eee; font-size:11px; padding-top: 25px; p ...

htmlcsstwitter-bootstrap

Improving Modal Closure on Form Submission Suggestions

Seeking Assistance with Modal Closure After Form Submission I understand that this inquiry may have been posed by someone else before, but I require guidance specifically for my code pertaining to handling form submission with AJAX. As a newcomer to AJAX, ...

phphtmljqueryajax

Developing a unique attribute using AngularJS

As a beginner in AngularJS, I am experimenting with creating directives to manipulate the background-color of a <div> based on specific conditions. I aim to write code like this within my view: <div effect-color="#2D2F2A">content here</div& ...

javascriptcssangularjs

Trouble with executing select query on connected tables in MySQL

$sql=mysql_query("SELECT b.book_id,u.user_id,user_name,book_name,review_date,book_rating,review FROM tbl_books b,tbl_user u,tbl_book_reviews br WHERE b.book_id=br.book_id AND u.user_id=br.user_id ...

phpmysqlhtml

Ways to apply a box shadow exclusively to specific elements

Is there a way to apply a box-shadow to a div without it affecting specific other divs? In simpler terms, is it possible to prevent shadows from being cast on a particular div? Take for example this scenario: http://jsfiddle.net/Cd6fE/ How can I prevent ...

jquerycss

Creating a responsive carousel that is not yet designed

As a beginner, I'm facing what seems like a simple problem that I just can't solve. Here is the HTML code I've written: <div class="discs container"> <ul> <li><div class="arrowleft"><a href="#" >< ...

htmlcss

Changing Ionic Column Widths Based on Content Length

In my dynamic ionic 2 grid system, I am facing a layout issue. <div> <ion-row> <ion-col > ; <ion-card-header class="card-header"> {{hunt.title}} </ion-card-header> </ion-col> <ion-col *ngIf="!hunt. ...

htmlcssangularionic-framework

Chrome has a tendency to cut off page contents in print preview, unlike other browsers that do not have this issue

My current version of Chrome browser (54.0.2840.59) is exhibiting a strange behavior when attempting to print preview an HTML page I have developed. The print preview truncates the page content, displaying less than what should be shown. The content is not ...

htmlcssprintingprint-preview

Ways to incorporate a scroll feature and display an iframe using JQuery

Is there a way to animate the appearance of hidden iframes one by one as the user scrolls down the website using jQuery? I have come across some solutions, but they all seem to make them appear all at once. I'm looking for a way to make the iframes s ...

javascripthtmljquerycssiframe

The upper margin is ineffective

Apologies, I am new to CSS. Here is the HTML code I have: <div class="box-A" >Box A content goes here</div> <div class="box-B" >Box B content goes here</div> I attempted to apply the following CSS to it: .box-A{ background-c ...

htmlcss

Understanding the behavior of CSS float (even after thorough examination of W3C documentation)

I am currently facing an issue related to the float property and have provided a snippet of code below for reference. My goal is to achieve a two-column layout using floats. While I am familiar with other methods to achieve this layout, I am specifically i ...

htmlcsscss-floatw3c

Contrast in spacing: comparing display block versus inline-block

Today, I stumbled upon something quite intriguing that has left me puzzled. Consider the following HTML: <div class="a"><div class="b"></div></div> And CSS: .a { background: blue; } .b { display:inline-block; height ...

htmlcsslayout

The unusual behavior of a page refresh in jQuery when replacing content

My website features a flash player. This code references the flash player stored in player_codes.php: <script language="javascript" type="text/javascript" src="songs_related/flashmp3player/swfobject.js" ></script> <!-- Div that contains pl ...

phpjqueryajaxhtml

Setting a maximum character limit for an HTML textarea

I am currently attempting to limit the maximum number of characters allowed in a textarea. Using: <textarea rows="4" cols="50" maxlength="50"> It is functioning correctly in Firefox, but there is no impact in IE. This is an issue as many website u ...

htmltextareamaxlength