Flex-grow Div With Video Tag Growing To Include Header Size When 'doctype Html' Included June 12, 2024 Post a Comment I am using Chrome 81, latest. I am including a inside a container which is set to flex-grow: 1. The idea is there is a header, and the bottom of the page Solution 1: In the case somebody else runs into this problem in the future, the only way I have been able to get the <video> tag to size the way I want is by using a <table> for the cells to vertically size. The video tag goes right along with it (see code below). It feels like flex-grow should work, but I can't seem to get it to work with <video>. If you can demonstrate how to get it to work, please do. Thanks! <!DOCTYPE html> <html> <body style="margin: 0"> <table style="height: 100vh; min-height: 100vh; max-height: 100vh; width: 100%; border-spacing: 0"> <tr style="height: 100px; background-color: red"> <td style="padding: 0"></td> </tr> <tr> <td style="padding: 0"> <div style="position: relative; height: 100%"> <video src="https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/360/Big_Buck_Bunny_360_10s_1MB.mp4" style="position: absolute; width: 100%; height: 100%; background-color: black" controls></video> </div> </td> </tr> </table> </body> </html> Copy Share You may like these postsConverting Raw Frames Into Webm Live StreamSlick.js And Html5 Video Autoplay And Pause On VideoHtml Video Mute ButtonHow To Get Rtsp Stream Over Web Application Post a Comment for "Flex-grow Div With Video Tag Growing To Include Header Size When 'doctype Html' Included"
Post a Comment for "Flex-grow Div With Video Tag Growing To Include Header Size When 'doctype Html' Included"