{"id":171126,"date":"2026-09-22T14:11:00","date_gmt":"2026-09-22T11:11:00","guid":{"rendered":"https:\/\/elementor.com\/help\/?p=171126"},"modified":"2026-09-18T16:36:25","modified_gmt":"2026-09-18T13:36:25","slug":"how-to-add-a-background-video-in-elementor-atomic-editor","status":"publish","type":"post","link":"https:\/\/elementor.com\/help\/how-to-add-a-background-video-in-elementor-atomic-editor\/","title":{"rendered":"How to Add a Background Video in Elementor Atomic Editor"},"content":{"rendered":"\n

To use a background video in the Atomic Editor, drag the native Background Video<\/strong> container element from the panel onto your canvas. Under the General<\/strong> tab, select your video source (Select video<\/strong>, Upload<\/strong>, or Insert from URL<\/strong>), set your playback options (Start Time, End Time, Autoplay, Mute, Loop), and customize the interactive Play<\/strong> and Pause<\/strong> state controls. <\/p>\n\n\n\n

What is the Background Video element in the Atomic Editor?<\/strong><\/h2>\n\n\n\n

The Background Video element operates as a flexible layout container rather than a static CSS background property. It includes a built-in nested content area for overlaying elements (such as text, buttons, or flex containers) and state-based containers for customizing interactive Play<\/strong> and Pause<\/strong> buttons.<\/p>\n\n\n\n

When dropped directly onto an open canvas area outside an existing container, Elementor automatically encloses the Background Video in a parent Flexbox container.<\/p>\n\n\n\n

How to add a Background Video to your page layout<\/strong><\/h2>\n\n\n\n

Example Scenario:<\/strong> You want to build a dynamic hero section featuring a looping background video with an overlaid headline and call-to-action button.<\/p>\n\n\n\n

Requirements:<\/strong> Elementor Core and Pro version 4.3.0 or higher on WordPress 6.8+. <\/p>\n\n\n\n

    \n
  1. Open the Elementor Editor for the page or template you wish to edit.<\/li>\n\n\n\n
  2. In the left panel, navigate to Atomic Elements<\/strong> and locate Background Video<\/strong>.<\/li>\n\n\n\n
  3. Drag and drop the Background Video<\/strong> element onto your canvas. (If dropped directly onto the canvas outside an existing container, Elementor automatically wraps it in a Flexbox container)<\/em>.<\/li>\n\n\n\n
  4. Select the Background Video container on the canvas to open its settings panel.<\/li>\n\n\n\n
  5. Choose your video source by clicking Select video<\/strong>, Upload<\/strong>, or Insert from URL<\/strong>.
    \"\"<\/li>\n\n\n\n
  6. Configure core playback settings: Start Time<\/strong>, End Time<\/strong>, Autoplay<\/strong>, Mute<\/strong>, and Loop<\/strong>.
    \"\"<\/li>\n<\/ol>\n\n\n\n

    How to configure playback controls and customizable Play\/Pause states<\/strong><\/h2>\n\n\n\n

    Customize interactive controls and overlay content directly inside the container:<\/p>\n\n\n\n

      \n
    1. Toggle Control Visibility:<\/strong> Turn Show Controls<\/strong> to On<\/strong> to display interactive playback buttons on the front end, or Off<\/strong> to hide them.
      \"\"<\/li>\n\n\n\n
    2. Style Play and Pause States:<\/strong> When controls are enabled, switch between Play<\/strong> and Pause<\/strong> state modes in the side panel.
      \"\"<\/li>\n\n\n\n
    3. Nest Control Elements:<\/strong> Drop custom icons, images, or paragraph text directly into the Play and Pause button containers to design custom interactive triggers.
      \"\"<\/li>\n\n\n\n
    4. Overlay Canvas Content:<\/strong> Drag any Atomic element – such as headings, text blocks, buttons, or multi-column flex containers – directly into the main video content area to overlay content cleanly over the playing video.<\/li>\n<\/ol>\n\n\n\n

      [callout type=”tip”]Most modern desktop and mobile browsers enforce strict media autoplay policies. To ensure your background video autoplays reliably across all devices and mobile viewports, ensure Mute<\/strong> is toggled to On<\/strong> whenever Autoplay<\/strong> is enabled.\u00a0[\/callout]<\/p>\n\n\n\n

      What are the supported use cases for Background Videos?<\/strong><\/h2>\n\n\n\n
        \n
      • Hero Banners:<\/strong> Create high-impact hero headers featuring ambient looping videos paired with nested text overlays and action buttons.<\/li>\n\n\n\n
      • Interactive Media Containers:<\/strong> Build promotional sections with custom Play\/Pause control triggers that reveal tailored text or icons when toggled by visitors.<\/li>\n\n\n\n
      • Feature Cards:<\/strong> Add subtle motion backdrops to individual layout cards or content blocks without embedding heavy external video players.<\/li>\n<\/ul>\n\n\n\n
        \"\"<\/figure>\n\n\n\n

        FAQs<\/strong><\/h2>\n\n\n\n
          \n
        • How do custom Play and Pause controls work?<\/strong>
          <\/strong>The Play\/Pause toggle acts as a state container. When enabled, you can switch between Play and Pause states in the panel and nest any custom element (icons, images, or text) inside each state independently.<\/li>\n\n\n\n
        • Can I overlay text or buttons directly over the video?<\/strong>
          <\/strong>Yes. The Background Video element includes a dedicated nested content area, allowing you to place any container or Atomic element directly over the video backdrop.<\/li>\n\n\n\n
        • What happens if I drop the Background Video element at the root of the canvas?<\/strong>
          <\/strong>It automatically wraps inside a parent Flexbox container to ensure clean layout structure and drag-and-drop flexibility.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"

          To use a background video in the Atomic Editor, drag the native Background Video container element from the panel onto your canvas. Under the General tab, select your video source (Select video, Upload, or Insert from URL), set your playback options (Start Time, End Time, Autoplay, Mute, Loop), and customize the interactive Play and Pause […]<\/p>\n","protected":false},"author":65,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_elementor_kustomer_id":[],"footnotes":""},"categories":[1506],"tags":[],"class_list":["post-171126","post","type-post","status-publish","format-standard","hentry","category-v4-editor"],"acf":[],"yoast_head":"\nHow to Add a Background Video in Elementor Atomic Editor | Elementor<\/title>\n<meta name=\"description\" content=\"Learn everything about How to Add a Background Video in Elementor Atomic Editor in this article from Elementor's Knowledge Base. Get Elementor tips & more.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elementor.com\/help\/how-to-add-a-background-video-in-elementor-atomic-editor\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Add a Background Video in Elementor Atomic Editor | Elementor\" \/>\n<meta property=\"og:description\" content=\"Learn everything about How to Add a Background Video in Elementor Atomic Editor in this article from Elementor's Knowledge Base. Get Elementor tips & more.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/help\/how-to-add-a-background-video-in-elementor-atomic-editor\/\" \/>\n<meta property=\"og:site_name\" content=\"Help\" \/>\n<meta property=\"article:published_time\" content=\"2026-09-22T11:11:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/09\/video-source.png\" \/>\n\t<meta property=\"og:image:width\" content=\"323\" \/>\n\t<meta property=\"og:image:height\" content=\"682\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Saras\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Saras\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/elementor.com\\\/help\\\/how-to-add-a-background-video-in-elementor-atomic-editor\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/help\\\/how-to-add-a-background-video-in-elementor-atomic-editor\\\/\"},\"author\":{\"name\":\"Saras\",\"@id\":\"https:\\\/\\\/elementor.com\\\/help\\\/#\\\/schema\\\/person\\\/e5957aee4a096954c42499ba80d1644d\"},\"headline\":\"How to Add a Background Video in Elementor Atomic Editor\",\"datePublished\":\"2026-09-22T11:11:00+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/help\\\/how-to-add-a-background-video-in-elementor-atomic-editor\\\/\"},\"wordCount\":614,\"publisher\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/help\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/help\\\/how-to-add-a-background-video-in-elementor-atomic-editor\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/elementor.com\\\/help\\\/wp-content\\\/uploads\\\/2026\\\/09\\\/video-source.png\",\"articleSection\":[\"Editor V4\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/elementor.com\\\/help\\\/how-to-add-a-background-video-in-elementor-atomic-editor\\\/\",\"url\":\"https:\\\/\\\/elementor.com\\\/help\\\/how-to-add-a-background-video-in-elementor-atomic-editor\\\/\",\"name\":\"How to Add a Background Video in Elementor Atomic Editor | Elementor\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/help\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/help\\\/how-to-add-a-background-video-in-elementor-atomic-editor\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/help\\\/how-to-add-a-background-video-in-elementor-atomic-editor\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/elementor.com\\\/help\\\/wp-content\\\/uploads\\\/2026\\\/09\\\/video-source.png\",\"datePublished\":\"2026-09-22T11:11:00+00:00\",\"description\":\"Learn everything about How to Add a Background Video in Elementor Atomic Editor in this article from Elementor's Knowledge Base. Get Elementor tips & more.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/help\\\/how-to-add-a-background-video-in-elementor-atomic-editor\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/elementor.com\\\/help\\\/how-to-add-a-background-video-in-elementor-atomic-editor\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/elementor.com\\\/help\\\/how-to-add-a-background-video-in-elementor-atomic-editor\\\/#primaryimage\",\"url\":\"https:\\\/\\\/elementor.com\\\/help\\\/wp-content\\\/uploads\\\/2026\\\/09\\\/video-source.png\",\"contentUrl\":\"https:\\\/\\\/elementor.com\\\/help\\\/wp-content\\\/uploads\\\/2026\\\/09\\\/video-source.png\",\"width\":323,\"height\":682},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/elementor.com\\\/help\\\/how-to-add-a-background-video-in-elementor-atomic-editor\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Help Center\",\"item\":\"https:\\\/\\\/elementor.com\\\/help\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Build with the Editor\",\"item\":\"https:\\\/\\\/elementor.com\\\/help\\\/build-with-the-editor\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Editor V4\",\"item\":\"https:\\\/\\\/elementor.com\\\/help\\\/build-with-the-editor\\\/v4-editor\\\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"How to Add a Background Video in Elementor Atomic Editor\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/elementor.com\\\/help\\\/#website\",\"url\":\"https:\\\/\\\/elementor.com\\\/help\\\/\",\"name\":\"Elementor\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/help\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/elementor.com\\\/help\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/elementor.com\\\/help\\\/#organization\",\"name\":\"Elementor\",\"url\":\"https:\\\/\\\/elementor.com\\\/help\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/elementor.com\\\/help\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/elementor.com\\\/help\\\/wp-content\\\/uploads\\\/2025\\\/06\\\/images.png\",\"contentUrl\":\"https:\\\/\\\/elementor.com\\\/help\\\/wp-content\\\/uploads\\\/2025\\\/06\\\/images.png\",\"width\":225,\"height\":225,\"caption\":\"Elementor\"},\"image\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/help\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/elementor.com\\\/help\\\/#\\\/schema\\\/person\\\/e5957aee4a096954c42499ba80d1644d\",\"name\":\"Saras\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/22d7b9ec038a434ee5470e837bce0863acbfc038152b10f7df48f61712ec4250?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/22d7b9ec038a434ee5470e837bce0863acbfc038152b10f7df48f61712ec4250?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/22d7b9ec038a434ee5470e837bce0863acbfc038152b10f7df48f61712ec4250?s=96&d=mm&r=g\",\"caption\":\"Saras\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Add a Background Video in Elementor Atomic Editor | Elementor","description":"Learn everything about How to Add a Background Video in Elementor Atomic Editor in this article from Elementor's Knowledge Base. Get Elementor tips & more.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/elementor.com\/help\/how-to-add-a-background-video-in-elementor-atomic-editor\/","og_locale":"en_US","og_type":"article","og_title":"How to Add a Background Video in Elementor Atomic Editor | Elementor","og_description":"Learn everything about How to Add a Background Video in Elementor Atomic Editor in this article from Elementor's Knowledge Base. Get Elementor tips & more.","og_url":"https:\/\/elementor.com\/help\/how-to-add-a-background-video-in-elementor-atomic-editor\/","og_site_name":"Help","article_published_time":"2026-09-22T11:11:00+00:00","og_image":[{"width":323,"height":682,"url":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/09\/video-source.png","type":"image\/png"}],"author":"Saras","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Saras","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/help\/how-to-add-a-background-video-in-elementor-atomic-editor\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/help\/how-to-add-a-background-video-in-elementor-atomic-editor\/"},"author":{"name":"Saras","@id":"https:\/\/elementor.com\/help\/#\/schema\/person\/e5957aee4a096954c42499ba80d1644d"},"headline":"How to Add a Background Video in Elementor Atomic Editor","datePublished":"2026-09-22T11:11:00+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/help\/how-to-add-a-background-video-in-elementor-atomic-editor\/"},"wordCount":614,"publisher":{"@id":"https:\/\/elementor.com\/help\/#organization"},"image":{"@id":"https:\/\/elementor.com\/help\/how-to-add-a-background-video-in-elementor-atomic-editor\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/09\/video-source.png","articleSection":["Editor V4"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/elementor.com\/help\/how-to-add-a-background-video-in-elementor-atomic-editor\/","url":"https:\/\/elementor.com\/help\/how-to-add-a-background-video-in-elementor-atomic-editor\/","name":"How to Add a Background Video in Elementor Atomic Editor | Elementor","isPartOf":{"@id":"https:\/\/elementor.com\/help\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/help\/how-to-add-a-background-video-in-elementor-atomic-editor\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/help\/how-to-add-a-background-video-in-elementor-atomic-editor\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/09\/video-source.png","datePublished":"2026-09-22T11:11:00+00:00","description":"Learn everything about How to Add a Background Video in Elementor Atomic Editor in this article from Elementor's Knowledge Base. Get Elementor tips & more.","breadcrumb":{"@id":"https:\/\/elementor.com\/help\/how-to-add-a-background-video-in-elementor-atomic-editor\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/help\/how-to-add-a-background-video-in-elementor-atomic-editor\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/help\/how-to-add-a-background-video-in-elementor-atomic-editor\/#primaryimage","url":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/09\/video-source.png","contentUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/09\/video-source.png","width":323,"height":682},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/help\/how-to-add-a-background-video-in-elementor-atomic-editor\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Help Center","item":"https:\/\/elementor.com\/help\/"},{"@type":"ListItem","position":2,"name":"Build with the Editor","item":"https:\/\/elementor.com\/help\/build-with-the-editor\/"},{"@type":"ListItem","position":3,"name":"Editor V4","item":"https:\/\/elementor.com\/help\/build-with-the-editor\/v4-editor\/"},{"@type":"ListItem","position":4,"name":"How to Add a Background Video in Elementor Atomic Editor"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/help\/#website","url":"https:\/\/elementor.com\/help\/","name":"Elementor","description":"","publisher":{"@id":"https:\/\/elementor.com\/help\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/help\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/elementor.com\/help\/#organization","name":"Elementor","url":"https:\/\/elementor.com\/help\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/help\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/images.png","contentUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/images.png","width":225,"height":225,"caption":"Elementor"},"image":{"@id":"https:\/\/elementor.com\/help\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/elementor.com\/help\/#\/schema\/person\/e5957aee4a096954c42499ba80d1644d","name":"Saras","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/22d7b9ec038a434ee5470e837bce0863acbfc038152b10f7df48f61712ec4250?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/22d7b9ec038a434ee5470e837bce0863acbfc038152b10f7df48f61712ec4250?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/22d7b9ec038a434ee5470e837bce0863acbfc038152b10f7df48f61712ec4250?s=96&d=mm&r=g","caption":"Saras"}}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts\/171126","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/users\/65"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/comments?post=171126"}],"version-history":[{"count":2,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts\/171126\/revisions"}],"predecessor-version":[{"id":171135,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts\/171126\/revisions\/171135"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/media?parent=171126"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/categories?post=171126"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/tags?post=171126"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}