{"id":4228,"date":"2022-02-28T17:16:11","date_gmt":"2022-02-28T17:16:11","guid":{"rendered":"https:\/\/ibex.tech\/wordpress-sites\/?p=4228"},"modified":"2022-03-01T11:59:12","modified_gmt":"2022-03-01T11:59:12","slug":"full-screen-video-background","status":"publish","type":"post","link":"https:\/\/ibex.tech\/wordpress-sites\/page-builders\/elementor\/backgrounds\/video-backgrounds\/full-screen-video-background","title":{"rendered":"Full screen video background"},"content":{"rendered":"\n<p>Elementor doesn&#8217;t currently have an option to set the page background to be a full-screen video, but it is possible.<\/p>\n\n\n\n<p>From a blank page, create a section with minimum height = 100 VH<\/p>\n\n\n\n<p>Set the background of the section to be the video you want to use.<\/p>\n\n\n\n<p>In this state the video will fill the screen. All good, except that it&#8217;s a section so as you add content in it, it will grow and scroll and the video will with it.<\/p>\n\n\n\n<p>The below position fixed fix won&#8217;t work for the &#8220;Background Fallback&#8221; image, so to make your background image display correctly too upload the image somewhere and use the background url for it instead (don&#8217;t specify a &#8220;Background Fallback&#8221; image in Elementor).<\/p>\n\n\n\n<p>Go to Page Settings > Advanced > Custom css and add this:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/*Set background video to full screen*\/\n.elementor-background-video-container {\r\n  position: fixed!Important;\r\n  \r\n  background: url(\/my-media-folder\/page-background-still.jpg);\r\n  background-size: cover;\r\n}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Elementor doesn&#8217;t currently have an option to set the page background to be a full-screen video, but it is possible. From a blank page, create a section with minimum height = 100 VH Set the background of the section to be the video you want to use. In this state the video will fill the [&hellip;]<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[342],"tags":[],"class_list":["post-4228","post","type-post","status-publish","format-standard","hentry","category-video-backgrounds"],"_links":{"self":[{"href":"https:\/\/ibex.tech\/wordpress-sites\/wp-json\/wp\/v2\/posts\/4228","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ibex.tech\/wordpress-sites\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ibex.tech\/wordpress-sites\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ibex.tech\/wordpress-sites\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/ibex.tech\/wordpress-sites\/wp-json\/wp\/v2\/comments?post=4228"}],"version-history":[{"count":3,"href":"https:\/\/ibex.tech\/wordpress-sites\/wp-json\/wp\/v2\/posts\/4228\/revisions"}],"predecessor-version":[{"id":4238,"href":"https:\/\/ibex.tech\/wordpress-sites\/wp-json\/wp\/v2\/posts\/4228\/revisions\/4238"}],"wp:attachment":[{"href":"https:\/\/ibex.tech\/wordpress-sites\/wp-json\/wp\/v2\/media?parent=4228"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ibex.tech\/wordpress-sites\/wp-json\/wp\/v2\/categories?post=4228"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ibex.tech\/wordpress-sites\/wp-json\/wp\/v2\/tags?post=4228"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}