{"id":6046,"date":"2021-07-09T02:00:00","date_gmt":"2021-07-09T00:00:00","guid":{"rendered":"https:\/\/alvarotrigo.com\/epa\/how-to-create-a-fullscreen-video-with-css-and-html\/"},"modified":"2024-02-08T00:31:46","modified_gmt":"2024-02-07T23:31:46","slug":"how-to-create-a-fullscreen-video-with-css-and-html","status":"publish","type":"post","link":"https:\/\/alvarotrigo.com\/blog\/how-to-create-a-fullscreen-video-with-css-and-html\/","title":{"rendered":"How to create a fullscreen video with CSS and HTML"},"content":{"rendered":"\n<p>Fullscreen videos are a trend and there&#8217;s a good reason for it. Having a <a href=\"https:\/\/alvarotrigo.com\/blog\/how-to-create-a-youtube-video-background-with-css\/\">background video<\/a> on your web amplifies your brand&#8217;s message, adds a dynamic look to it and it just looks amazing. On this tutorial we&#8217;ll make a fullscreen video using the <strong>HTML 5 <code>video<\/code> tag<\/strong>. We&#8217;ll also position it on the background. All by just using CSS and HTML.<\/p>\n\n\n\n<p>Before getting into the details, check out the result:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_ExmVgJZ\" data-src=\"\/\/codepen.io\/anon\/embed\/ExmVgJZ?height=450&amp;theme-id=1&amp;slug-hash=ExmVgJZ&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed ExmVgJZ\" title=\"CodePen Embed ExmVgJZ\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"setting-up-our-html-for-the-fullscreen-video-container\">Setting up our HTML for the fullscreen video container<\/h2>\n\n\n<p>So now that we know these 2 basic rules, let&#8217;s start setting up the HTML for our background video:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"video-container\"<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">video<\/span> <span class=\"hljs-attr\">autoplay<\/span> <span class=\"hljs-attr\">muted<\/span> <span class=\"hljs-attr\">loop<\/span> <span class=\"hljs-attr\">poster<\/span>=<span class=\"hljs-string\">\"cake.jpg\"<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">source<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/cdn.videvo.net\/videvo_files\/video\/free\/2019-07\/small_watermarked\/Raw_Vegan_Blueberry_Cake_Cut_Birthday_Cooking_preview.webm\"<\/span>  <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"video\/webm\"<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n<span class=\"hljs-comment\">&lt;!-- end of video-container--&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>The <code>video<\/code> element comes loaded with a few handy attributes that can be used to control how and when a video plays:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Autoplay:<\/strong> The boolean <code>autoplay<\/code> attribute ensures that the fullscreen video automatically plays in the background.<\/li>\n\n\n\n<li><strong>Controls:<\/strong> There will be no play\/stop\/pause controls for our background video so we have omitted the <code>controls<\/code> attribute. This is a boolean attribute.<\/li>\n\n\n\n<li><strong>Muted:<\/strong> The <code>muted<\/code> attribute serves the fullscreen video without any sound.<\/li>\n\n\n\n<li><strong>Loop:<\/strong> We want our background video to auto-play in a loop so we also use the <code>loop<\/code> attribute. The <code>loop<\/code> attribute is also a boolean.<\/li>\n\n\n\n<li><strong>Poster:<\/strong> Lastly, the <code>poster<\/code> attribute will serve an image to the user while the background video loads. For example, if a user has slow internet speed then it might be a better choice to serve an image. It will also display an image in case the fullscreen video doesn&#8217;t display at all. This can happen when the HTML5 <code>video<\/code> element is not supported by a particular browser.<\/li>\n<\/ul>\n\n\n<h2 class=\"wp-block-heading\" id=\"using-css-to-make-the-video-fullscreen\">Using CSS to make the video fullscreen<\/h2>\n\n\n<p>Now that we have the <code>video<\/code> element placed inside our HTML, let&#8217;s set up the CSS for it. We&#8217;d like the video to cover the entire page.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-tag\">video<\/span>{\n  <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">100vw<\/span>;\n  <span class=\"hljs-attribute\">height<\/span>: <span class=\"hljs-number\">100vh<\/span>;\n  <span class=\"hljs-attribute\">object-fit<\/span>: cover;\n  <span class=\"hljs-attribute\">position<\/span>: fixed;\n  <span class=\"hljs-attribute\">top<\/span>: <span class=\"hljs-number\">0<\/span>;\n  <span class=\"hljs-attribute\">left<\/span>: <span class=\"hljs-number\">0<\/span>;\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Our CSS fullscreen video has a position of <code>fixed<\/code> thus being removed from the normal flow of the HTML document.<\/p>\n\n\n\n<p>Additionally, it has its <code>top<\/code> and <code>left<\/code> properties set to <code>0<\/code> so it\u2019s positioned at the top-left corner of the body of the web page. The <code>object-fit<\/code> property will dictate how the fullscreen video should be resized. The <code>cover<\/code> value will ensure that the video maintains its aspect ratio and isn&#8217;t distorted. The image will be clipped to fit the <code>width<\/code> of the video. It is set to <code>100%<\/code> since we want it to span the video of the document. Finally, the <code>height<\/code> and <code>width<\/code> properties of our fullscreen video have a value of 100 to ensure that the video&#8217;s height and width scales appropriately to display all the video content.<\/p>\n\n\n\n<p>That&#8217;s all the CSS that we need to display a fullscreen video on our page! With that being said, now we can proceed to add other things to be layered on top of our fullscreen video such as headings, buttons, and other elements.<\/p>\n\n\n<h2 class=\"wp-block-heading\" id=\"overlay-elements-on-top-of-the-background-video\">Overlay elements on top of the background video<\/h2>\n\n\n<p>Let&#8217;s now add a heading and a button on top of the fullscreen video as we see in a lot of web pages that use background videos. The key here is that any elements laid on top of the video should have high contrast. This will make them easily visible against the background video leading to better user experience and accessibility. To do this we will be making a separate <code>div<\/code> element which will be the parent of our heading and button:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"header\"<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h1<\/span>&gt;<\/span>Blueberry Cheesecake<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h1<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span>&gt;<\/span>Recipe here<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Right now this would appear under the fullscreen video, not on the front. We have to apply some more changes to the <code>header<\/code> element in order to position it over the CSS background video:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-class\">.header<\/span> {\n  <span class=\"hljs-attribute\">position<\/span>: relative;\n  <span class=\"hljs-attribute\">height<\/span>: <span class=\"hljs-number\">100vh<\/span>;\n  <span class=\"hljs-attribute\">text-align<\/span>: center;\n  <span class=\"hljs-attribute\">justify-content<\/span>: center;\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>We have set a relative position for the header element so it gets placed placed over the fixed positioned video element. We are also using <code>hei``ght:100%<\/code> on the <code>header<\/code> element to make sure our image takes the whole height of the screen.<\/p>\n\n\n<h2 class=\"wp-block-heading\" id=\"css-responsive-fullscreen-video%3A-do-we-really-need-it%3F\">CSS Responsive fullscreen video: do we really need it?<\/h2>\n\n\n<p>Nowadays many people surf the web from their mobile phones. If you have set a CSS background video on your website, you may be wondering how to make it responsive.<\/p>\n\n\n\n<p>Well, personally we think that playing a background video on a webpage may not be a good idea if the user is browsing the page on his mobile. Let&#8217;s ask ourselves again the key question: why did we choose to have a fullscreen video from the start? Because we want to impress the user, catch his attention and give him an amazing user experience. Are we going to achieve this goal on a tiny mobile screen? I&#8217;m afraid not. In addition, data charges and loading times are also something to take into account.<\/p>\n\n\n\n<p>Nevertheless, this is just a personal opinion and the final decision depends on the underlying reason that you have to put a fullscreen video on your web. That&#8217;s why on this tutorial we will also take into account that you may want to set a responsive fullscreen video.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"playing-a-responsive-fullscreen-video-on-mobile\">Playing a responsive fullscreen video on mobile<\/h3>\n\n\n<p>If you want to play a responsive background video on mobile then add the <code>playsinline<\/code> attribute to the <code>video<\/code> element. This will play an embedded video on mobile devices. You must also use the <code>autoplay<\/code> and <code>muted<\/code> attributes along with <code>playsinline<\/code>.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-5\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"video-container\"<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">video<\/span> <span class=\"hljs-attr\">autoplay<\/span> <span class=\"hljs-attr\">muted<\/span> <span class=\"hljs-attr\">loop<\/span> <span class=\"hljs-attr\">playsinline<\/span> <span class=\"hljs-attr\">poster<\/span>=<span class=\"hljs-string\">\"cake.jpg\"<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">source<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/cdn.videvo.net\/videvo_files\/video\/free\/2019-07\/small_watermarked\/Raw_Vegan_Blueberry_Cake_Cut_Birthday_Cooking_preview.webm\"<\/span>  <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"video\/webm\"<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n<span class=\"hljs-comment\">&lt;!-- end of video-container--&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-5\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>This will auto play the responsive fullscreen video on mobile browsers on loop like a GIF.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"replacing-the-fullscreen-video-with-an-image-on-mobile\">Replacing the fullscreen video with an image on mobile<\/h3>\n\n\n<p>If you prefer to remove the background video on mobiles, we suggest replacing it with an image. To deal with this, we can use a media query:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-6\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-keyword\">@media<\/span> screen <span class=\"hljs-keyword\">and<\/span> (<span class=\"hljs-attribute\">max-width:<\/span> <span class=\"hljs-number\">768px<\/span>) {\n  <span class=\"hljs-selector-tag\">html<\/span>{\n    <span class=\"hljs-attribute\">background<\/span>: <span class=\"hljs-built_in\">url<\/span>(<span class=\"hljs-string\">\"https:\/\/images.unsplash.com\/photo-1620222071550-a5c7f8b600ed?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYyMDY4NDIyNA&amp;ixlib=rb-1.2.1&amp;q=80&amp;w=400\"<\/span>);\n    <span class=\"hljs-attribute\">background-size<\/span>: cover;\n  }\n\n  <span class=\"hljs-selector-class\">.video-container<\/span>{\n    <span class=\"hljs-attribute\">display<\/span>:none;\n  }\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-6\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>The media query detects if the size of the display screen is less than 768 pixels wide. If so, then we hide the <code>video-container<\/code> and instead display a static image. The heading and button will now be displayed on top of the background image instead.<\/p>\n\n\n<h2 class=\"wp-block-heading\" id=\"2-common-mistakes-to-avoid-on-css-background-videos\">2 common mistakes to avoid on CSS background videos<\/h2>\n\n\n<p>Now you are almost ready to create your own fullscreen video! However, before we end this tutorial, we want to warn about some common mistakes when using background videos.<\/p>\n\n\n\n<p>Fullscreen videos can delight your users, but they can also be their worst nightmare. Have you ever entered a website where the background video is so noisy that you what to leave that site immediately? I\u2019m sure you did have such kind of experience\u2026 Of course, we do not want to cause such a negative impact on our users. That\u2019s why we have to remember 2 simple gold rules when setting a fullscreen video.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"silence%2C-please\">Silence, please<\/h3>\n\n\n<p>We want the user to keep calm and relax while surfing our web. Not to frighten him and make him run away. That\u2019s we always recommend mute any background video that you place on your website. You can give the user the option to unmute it but keep it muted by default.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"the-shorter%2C-the-better\">The shorter, the better<\/h3>\n\n\n<p>Time is gold. Do not \u201csteal\u201d this treasure from the user. Our video should not last more than 20-30 seconds long. A longer video can bore the user and give him reasons to leave your website looking for something else that doesn&#8217;t make him lose his precious time.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Use CSS to create a fullscreen video with the HTML5 video element. CSS only solution with pure HTML video.<\/p>\n","protected":false},"author":1,"featured_media":6045,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[106],"tags":[9,25,17],"class_list":["post-6046","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","tag-css","tag-html","tag-web"],"acf":[],"_links":{"self":[{"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/posts\/6046","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/comments?post=6046"}],"version-history":[{"count":4,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/posts\/6046\/revisions"}],"predecessor-version":[{"id":9567,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/posts\/6046\/revisions\/9567"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/media\/6045"}],"wp:attachment":[{"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/media?parent=6046"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/categories?post=6046"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/tags?post=6046"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}