Below is the CSS style being used:
video {
position: absolute;
transform: rotate(90deg);
width: 100%;
height: 100%;
z-index: 4;
visibility: visible;
}
This code snippet demonstrates a video element:
<video id="myVideo" src="/Space4.mp4" autoplay loop></video>
The current setup rotates and centers the video, however, it appears to be only a quarter of the screen size. How can I adjust it to fit the entire screen?
When working with CSS3 units, there's a nifty trick to ensure correct dimensions for rotated elements like the <video>. Instead of using regular percentages, try setting height: 100vw and width: 100vh to specify that the height should be based on viewport width and the width on viewport height.
To align the video edges with the viewport after rotation, it's important to adjust the pivot point around which the rotation occurs. A negative margin-top can help move the video upwards by the specified height (in this case, 100vw).
By making these adjustments and adding object-fit: cover to eliminate whitespace, you'll achieve a visually pleasing result:
html,
body {
margin: 0;
}
video {
position: absolute;
transform: rotate(90deg);
transform-origin: bottom left;
width: 100vh;
height: 100vw;
margin-top: -100vw;
object-fit: cover;
z-index: 4;
visibility: visible;
}<video id="myVideo" src="http://html5demos.com/assets/dizzy.mp4" autoplay loop></video>I hope these tips are helpful! Feel free to reach out if you have any questions.
Just starting out with web development and stack overflow, so please bear with me if I struggle to explain the issue. I came across some JavaScript to make my website responsive on small screens (mobiles). However, I am having trouble centering my top nav ...
I encountered an issue with a button that disappears when clicked on. Additionally, clicking the button once does not trigger any actions associated with it. In order to execute the button actions, I have to click the area where the button was located afte ...
I am currently trying to set a Browser Tab icon for the local system, but it is not working. However, when using an HTTP static icon, it works perfectly. Can someone please help me understand what the issue might be? PAGE 1 : Icon Not Showing <link re ...
Attempting to enhance the responsiveness of images on my website has led me to discover the srcset and sizes attributes. The objective is clear: If the screen size exceeds 600px or falls below 300px, a 250x250 image should be displayed For sizes in betw ...
I'm having trouble getting this code to animate a div to a calculated position. Can someone please help me troubleshoot? $(document).ready(function() { var is_Clicked = false; $("#togglebutton").click(function() { if (is_Cli ...
There is a Contact Form 7 on the webpage that I want to make fixed to the right side. Initially, the form is hidden and only the form button (open) is visible. When clicked, the form should open. ...
Currently, I am working on developing a registration page using HTML and JavaScript. Although I have added the 'required' tag in HTML to prevent users from submitting empty input fields, I noticed that users can bypass this restriction by simply ...
Upon loading the page, I noticed that if the browser width is greater than 540px, the modal displaying an image gets cut off (see figure below). What steps should I take to ensure that the vertical scroll bar appears immediately? https://i.sstatic.net/cJv ...
I have created a feature to copy abbreviation definitions when the clipboard icon is clicked. A tooltip displaying 'Copied' should appear after clicking the icon, but for some reason, it's not visible. Here's the code: $(document).re ...
Currently, I'm in the process of developing a video streaming server using nodeJS with express. To monitor the progress status, I am utilizing the "request-progress" module. So far, everything pertaining to video streaming is working perfectly. Howev ...
I have a unique table that generates dynamic Divs with ID's that count as they are created in the following format: <div id="dgpCheckDiv10_0"> <input Delete </div> <div id="dgpCheckDiv10_1"> text2 </div> Some of t ...
On my website at , I have placed my AdSense ads at the top of the page. However, I encountered an issue with Internet Explorer 8 where the Javascript code I used to move the ads to a different position on the page doesn't seem to work: <!-- POSI ...
I am currently facing a challenge with creating a responsive image within a grid layout using CSS. The image is not resizing properly when the browser window changes size and is extending beyond its container borders. I have experimented with various techn ...
Can anyone help me with centering an image on my website? I've tried the following code: top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); You can see what's happening on my site here: ...
I recently designed a menu on https://codepen.io/ettrics/pen/ZYqKGb with 5 unique menu titles. However, I now have the need to add a sixth title to the menu. After attempting to do so by adding "strip6" in my CSS, the menu ended up malfunctioning and looki ...
Recently, I encountered an issue on my website and found a solution by creating two separate HTML pages. However, when I modified the urls.py to differentiate the URLs for these pages, the CSS stopped working. Below is my code snippet and a detailed explan ...
I am fairly new to using Selenium and could use some guidance with the following issue. I am attempting to create a birthday bot for Facebook, but navigating through the platform's latest UI has been challenging with JavaScript disabled. I've bee ...
I am facing a scenario similar to this: <div id="m0"> ... <tr> <td></td> <td></td> <td>Radio</td> </tr> </div> <div id="m1"> ... <tr> <td></td> <td>< ...
After spending 3 and a half hours racking my brain, I still can't figure out how to complete two seemingly simple tasks. First, I need to pad the outside of paragraph div, and secondly, I want to split the main section into two columns to add some lin ...
Here is my jQuery script: $('.projektet').click(function(){ var url = $(this).find("a").attr("href"); window.location = url; }); <div class='projektet'> <h3>".$alias." ".$expertis." ".$other."</h3> & ...