Tips on adjusting video to the screen size

I am looking to create a fullscreen video for my webpage. I originally used an image as a cover, but now I want to switch to using a video. You can check out my old code on this link.

Below is my new video code:

<div class="embed-responsive embed-responsive-16by9">
<video  controls poster="http://www.webestools.com/page/media/videoTag/BigBuckBunny.png">
    <source src="http://www.webestools.com/page/media/videoTag/BigBuckBunny.mp4" type="video/mp4">
</video>
</div>

<div id="body2">lorem ipusm dolor sue lorem ipusm dolor sue lorem ipusm dolor sue lorem ipusm dolor sue lorem ipusm dolor sue lorem ipusm dolor sue</div>

I just need to update the image with a video. However, as shown in the fiddle, the ID "test" fits the screen perfectly while the video I want to use does not. It is neither fitting the screen nor responsive. How can I make the video fullscreen, fit-to-screen, and responsive?

You can see the desired result with a video on this CodePen link. The height of the video still exceeds the screen size.

jqueryhtmlcssvideo

Answer №1

If you're looking for a solution that will work, try the following: https://jsfiddle.net/Garconis/6mscbLer/

Here is the HTML:

<div class="wrapper">
    <video src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/28831/Typer.mp4" autoplay loop></video>
</div>

And here is the CSS:

.wrapper {
    width:100%;
    height:100vh;
    overflow: hidden;
    background-image: url(http://www.webestools.com/page/media/videoTag/BigBuckBunny.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.wrapper video {
    object-fit: cover;
    width:100%;
    height:100%;
}

Answer №2

Insert this snippet into your CSS stylesheet

video{
max-width: 100%;
}

Check out the example on JSFiddle: https://jsfiddle.net/fpjqh822/12/

Note:

To ensure that the video maintains its size at 100% of the screen, include min-width: 100%; in the video styling. Make sure the parent div containing the video is also set to 100%, without any margins or paddings.

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

Creating a JSON hierarchy from an adjacency list

I am currently working with adjacency data that includes ID's and Parent ID's. My goal is to convert this data into hierarchical data by creating nested JSON structures. While I have managed to make it work, I encountered an issue when dealing ...

javascriptjqueryarraysjson

JavaScript for validating dimension text input has unique functionalities

I am looking for guidance on validating an ASP textbox using JavaScript. My goal is to validate a user's input in the format of 4-1/2, 80-1/2, 6/8, or simply 5. Only these types of patterns should be allowed, and each input must contain only one numbe ...

javascriptjqueryasp.nethtml

Is there a way to create a dropdown menu that appears to emerge from behind a button?

I am struggling with the stack order of my dropdown menu. Despite using z-index, it appears in front of the button instead of behind it. I want it to look like it is coming out from behind the button. Here is my code: .subnav-wrapper { position: relat ...

htmlcss

Issues with GTM web tracking due to conflicts with the jQuery submit function when used in an AngularJS form

I am having trouble getting the Google Tag Manager jQuery script to fire when tracking form submissions. I have removed any AngularJS expressions for privacy reasons. Can anyone provide assistance with this issue? <div id="login_signIn" class=""> ...

jqueryangularjsgoogle-tag-manager

Convert Soundcloud thumbnail into a printable format using the @media print CSS rule

For those wanting to add an embedded Soundcloud player on a blog: <iframe width="500" height="300" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/271188615&color=%23ff5500&auto_p ...

htmlcssprintingmedia-queriessoundcloud

Prevent redirection on buttons within ionic lists

THE ISSUE: I am facing an issue in my Ionic app where I am using the ion-list component. Each item in the list can be swiped to reveal a button (add/remove to favorites). Additionally, each item serves as a link to another page. The problem arises when ...

javascriptcssangularjsionic-framework

Failure to trigger Summernote's OnImageUpload function

After transitioning to the latest version of Summernote, which is Version 7, I encountered a problem with the image upload functionality. Despite specifying the line onImageUpload: function(files) {sendFile(files[0]);}, it seems that this code is not being ...

javascriptphpjquerysummernote

Dynamically uploading an HTML file using AJAX

My webpage has a feature that dynamically creates HTML with drop down elements. Additionally, there is a "create File" button on the page. The goal is for this button to trigger an AJAX POST request and upload the dynamic page created with drag and drops a ...

javascriptjqueryajax

Revamp the jquery.ajax promise or find an alternative solution

I am looking to modify the data from an ajax call and pass it to another plugin's constructor. I believe that by having the plugin options accept either an object for its data or a function that returns the data, I can incorporate a deferred object li ...

jqueryajaxjquery-deferred

Is there a difference between $('li.item-ii').find('li') and $('li.item-ii li') in jQuery?

Looking at the example of jQuery's find() (documentation can be found here) I am curious about its necessity, as $('li.item-ii').find('li') seems to be equivalent to $('li.item-ii li') In essence, both select all ...

jqueryjquery-selectors

Issue with displaying HTML escaped characters such as "&#39" results in showing a pound sign instead of a single quote

Whenever I store data in my Java code, I employ HtmlUtils.htmlEscape to ensure that HTML characters are escaped. However, when retrieving the data and trying to display it in an HTML format (using AngularJS 1.6), the escaped characters (&rsquo;, &am ...

javahtmlangularjsspring-boot

What is the best way to extract a value from two different HTML identifiers?

Something tells me that this task is quite simple. I just need some guidance on what I might be missing here. All I really want is a basic program that can extract the content from <span id "text"> and paste it into <div id="text2">. funct ...

javascripthtml

The Harp server generates excessive white space within HTML documents

Running a blog on Harp has been smooth sailing, except for one issue that I can't seem to figure out. The project utilizes EJS and the problem lies in the outputted HTML containing excessive whitespace. I've attempted to minimize it, especially w ...

htmlejsremoving-whitespaceharp

Is there an efficient method for matching "data-" attributes with property names in mixed case?

In my custom jQuery plugins, I utilize a base plugin class that goes beyond what the jQuery UI widget offers by handling more complex tasks. Currently, I am looking to extract values from data- attributes attached to elements and incorporate them as optio ...

javascriptjqueryjquery-pluginscustom-data-attribute

Place a picture and words within a submit button

I need assistance with aligning text and a small airplane image on a submit button. Currently, the text is overlapping the image and I am unsure how to fix this issue. How can I adjust the position of the text to display to the right of the button? Is ther ...

htmlcss

Converting HTML to PDF using AngularJS

Can anyone help me with converting HTML to PDF in Angular? I have tried using the angular-save-html-to-pdf package from npm, but encountered errors. Are there any other solutions or custom directives available for this task? ...

htmlcssangularjspdfhtml2pdf

You are unable to extract data from an HTML table

I have been encountering an issue while trying to extract data from an HTML table. Every time I attempt to do so, I am faced with an ERROR Message 13 "Type Mismatch". I suspect that the problem lies in my use of incorrect HTML tags. Despite spending severa ...

htmlexcelvbaweb-scraping

Verify if all the words commence with a certain character using regular expressions

I am working on form validation using Angular, and I am trying to verify if all words in a string start with the letter 'Z'. I am implementing this using a pattern so that I can dynamically change the input's class. So far, this is what I h ...

htmlangularregex

Styling content in a CSS file and then rendering it as a

My current project involves converting a webpage into a PDF file and I am using @page @bottom-left to insert text in the bottom left corner. @page {size: portrait A4; @bottom-left {content: "Some text to display at the bottom left. Some additional text ...

htmlcsspdf

Issue with consistent search autocomplete feature in a stationary navigation bar using bootstrap technology

My issue is with the autocomplete box - I want it to have the same width as the entire search box. Something like this using Bootstrap's col-xs-11 class: https://i.sstatic.net/npzhC.png If I set the position to "relative," it looks like this (all st ...

htmlcssbootstrap-4search-box