{"id":914,"date":"2022-08-05T14:26:00","date_gmt":"2022-08-05T14:26:00","guid":{"rendered":"https:\/\/blog.hostinger.io\/support\/2022\/08\/05\/6448859-hostinger-website-builder-how-to-add-videos\/"},"modified":"2026-03-16T12:12:08","modified_gmt":"2026-03-16T12:12:08","slug":"6448859-hostinger-website-builder-how-to-add-videos","status":"publish","type":"post","link":"https:\/\/www.hostinger.com\/support\/6448859-hostinger-website-builder-how-to-add-videos\/","title":{"rendered":"Hostinger Website Builder: How to Add Videos"},"content":{"rendered":"<p class=\"no-margin\">There are several ways to add videos to a website created with <b>Hostinger Website Builder<\/b> &#128071; <\/p><p class=\"no-margin\">\n<\/p><h2 id=\"h_09042f5f58\">Adding YouTube or Vimeo Videos<\/h2><p class=\"no-margin\">Within the editor, expand the <b>Add elements<\/b> panel on the left. Select the <b>video<\/b> <b>element<\/b>, and drag and drop it anywhere on your website:<\/p><p class=\"no-margin\">\n<\/p><div class=\"intercom-container\"><img decoding=\"async\" src=\"\/support\/wp-content\/uploads\/sites\/55\/2022\/08\/984347cc-758d-4cbe-9785-9eec684d9f6f.jpg\"><\/div><p class=\"no-margin\">\n<\/p><p class=\"no-margin\">Click on the element to find more options (edit, duplicate, change visibility, delete, etc.):<\/p><p class=\"no-margin\">\n<\/p><div class=\"intercom-container intercom-align-center\"><img decoding=\"async\" src=\"\/support\/wp-content\/uploads\/sites\/55\/2022\/08\/d7dca62e-2666-4d63-981a-2e6a58aaf96b.jpg\" alt=\"A video element in Hostinger Website Builder\" width=\"400\"><\/div><p class=\"no-margin\">\n<\/p><p class=\"no-margin\">Click on <b>Edit video<\/b> to find more settings:<\/p><div class=\"intercom-interblocks-table-container\">\n<table role=\"presentation\">\n<tbody>\n<tr>\n<td style=\"background-color: #e3e7fa80\">\n<p class=\"intercom-align-center no-margin\"><b>General<\/b><\/p>\n<\/td>\n<td style=\"background-color: #e3e7fa80\">\n<p class=\"intercom-align-center no-margin\"><b>Animation<\/b><\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<ul>\n<li>\n<p class=\"no-margin\"><b>Video link<\/b>: currently, the video element supports <b><a href=\"https:\/\/www.youtube.com\/\" target=\"_blank\" class=\"intercom-content-link\" rel=\"noopener\">YouTube<\/a><\/b> and <b><a href=\"https:\/\/vimeo.com\/\" target=\"_blank\" class=\"intercom-content-link\" rel=\"noopener\">Vimeo<\/a><\/b> videos, so your video should be first uploaded to any of those platforms<\/p>\n<\/li>\n<li>\n<p class=\"no-margin\"><b>Autoplay<\/b><\/p>\n<\/li>\n<li>\n<p class=\"no-margin\"><b>Loop<\/b><\/p>\n<\/li>\n<li>\n<p class=\"no-margin\"><b>Show video controls<\/b><\/p>\n<\/li>\n<\/ul>\n<\/td>\n<td>\n<ul>\n<li>\n<p class=\"no-margin\">Add an <b><a href=\"\/support\/6463358-website-builder-how-to-add-animations\" target=\"_blank\" class=\"intercom-content-link\">animation<\/a> <\/b>to the video element<\/p>\n<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div><div class=\"intercom-interblocks-callout\" style=\"background-color: #e3e7fa80;border-color: #334bfa33\">\n<p class=\"no-margin\">If the option <b>Show video controls <\/b>is disabled, Vimeo videos won&rsquo;t play on mobile devices. To play Vimeo videos on mobile devices, enable the options <b>Show video controls<\/b> or <b>Autoplay &#128161; <\/b><\/p>\n<\/div><p class=\"no-margin\">\n<\/p><h3 id=\"h_bdeeac5c66\">Troubleshooting Unavailable YouTube Videos<\/h3><p class=\"no-margin\">If the YouTube video is unavailable, you&rsquo;re most likely using a shortened YouTube URL:<\/p><pre><code>&#8203;https:\/\/youtu.be\/video-id <\/code><\/pre><p class=\"no-margin\">To fix it, change the beginning of the URL to this: <\/p><pre><code>https:\/\/www.youtube-nocookie.com\/embed\/video-id<\/code><\/pre><p class=\"no-margin\">\n<\/p><h2 id=\"h_81150abc12\">Adding Facebook Videos<\/h2><p class=\"no-margin\">You can easily embed any <b>publicly<\/b> shared <b><a href=\"https:\/\/www.facebook.com\/\" target=\"_blank\" class=\"intercom-content-link\" rel=\"noopener\">Facebook<\/a><\/b> video into your website.<\/p><p class=\"no-margin\">\n<\/p><p class=\"no-margin\">1. Copy the URL of the selected Facebook video:<\/p><p class=\"no-margin\">\n<\/p><div class=\"intercom-container intercom-align-center\"><img decoding=\"async\" src=\"\/support\/wp-content\/uploads\/sites\/55\/2022\/08\/3a491c14-9470-4e7a-93ef-88ddabd935ef.jpg\" alt=\"Copying the link of a public Facebook video\" width=\"338\"><\/div><p class=\"no-margin\">\n<\/p><p class=\"no-margin\">2. Open Facebook&rsquo;s <b><a href=\"https:\/\/developers.facebook.com\/docs\/plugins\/embedded-video-player#configurator\" target=\"_blank\" class=\"intercom-content-link\" rel=\"noopener\">Code Configurator<\/a><\/b> and paste the link there. You can also specify the preferred width of the video in pixels. Once you do that, click <b>Get Code<\/b>:<\/p><p class=\"no-margin\">\n<\/p><div class=\"intercom-container intercom-align-center\"><img decoding=\"async\" src=\"\/support\/wp-content\/uploads\/sites\/55\/2022\/08\/48e1b08d-652b-4e0b-97d2-4adcb7ad7adb.jpg\" alt=\"Facebook's embedded video player configurator\"><\/div><p class=\"no-margin\">\n<\/p><p class=\"no-margin\">3. Copy the <b>IFrame<\/b> code of the video:<\/p><p class=\"no-margin\">\n<\/p><div class=\"intercom-container intercom-align-center\"><img decoding=\"async\" src=\"\/support\/wp-content\/uploads\/sites\/55\/2022\/08\/630cd3ce-a5d9-4506-815b-ebae16e06bc8.jpg\" alt=\"Copying the iframe code of the Facebook video\"><\/div><p class=\"no-margin\">\n<\/p><p class=\"no-margin\">4. Within your website editor, add an <b><a href=\"\/support\/6463152-website-builder-how-to-embed-a-custom-code\" target=\"_blank\" class=\"intercom-content-link\">embed code element<\/a><\/b> anywhere on your site and insert the code.<\/p><p class=\"no-margin\">\n<\/p><p class=\"no-margin\">5. <b><a href=\"\/support\/6435697-website-builder-updating-a-website\" target=\"_blank\" class=\"intercom-content-link\">Update your website<\/a><\/b> and check what it looks like online.<\/p><p class=\"no-margin\">\n<\/p><h2 id=\"h_ddd51982a5\">Adding Videos From a Local Device<\/h2><p class=\"no-margin\">To add a video from your computer, you first need to upload the video to any cloud-based file storage, e.g., <b>Google Drive<\/b>. This way, a special iFrame code of your file is created. To display the video on your website, you would need to paste the iframe code in the embed code element. <\/p><p class=\"no-margin\">\n<\/p><p class=\"no-margin\">1. Upload your video to <b><a href=\"https:\/\/www.google.com\/drive\/\" target=\"_blank\" class=\"intercom-content-link\" rel=\"noopener\">Google Drive<\/a> <\/b>or any other cloud file storage.<\/p><p class=\"no-margin\">\n<\/p><p class=\"no-margin\">2. Get an iframe code for that video. If you use Google Drive, follow <b><a href=\"https:\/\/www.youtube.com\/watch?v=z6ElW8kKDEU\" target=\"_blank\" class=\"intercom-content-link\" rel=\"noopener\">these instructions<\/a><\/b>.<\/p><p class=\"no-margin\">\n<\/p><p class=\"no-margin\">3. In a new tab, open your website&rsquo;s editor. Add an <b><a href=\"\/support\/6463152-website-builder-embed-code\" target=\"_blank\" class=\"intercom-content-link\">embed code element<\/a><\/b> anywhere on your site, and insert the video iFrame code.<\/p><p class=\"no-margin\">\n<\/p><p class=\"no-margin\">4. <b><a href=\"\/support\/6435697-website-builder-updating-a-website\" target=\"_blank\" class=\"intercom-content-link\">Update your website<\/a><\/b> and check what it looks like online.<br>&#8203;<\/p><p class=\"no-margin\">\n<\/p><h2 id=\"h_a6b98b60a3\">Adding Videos to a Section Background<\/h2><p class=\"no-margin\">\n<\/p><p class=\"no-margin\">Within the builder, click on the section you want to edit and select <b>Edit section<\/b>:<\/p><p class=\"no-margin\">\n<\/p><div class=\"intercom-container intercom-align-center\"><img decoding=\"async\" src=\"\/support\/wp-content\/uploads\/sites\/55\/2022\/08\/49c10e79-747f-48c7-b519-bcf2ebdc170b.jpg\" alt=\"The section settings in Hostinger Website Builder\"><\/div><p class=\"no-margin\">\n<\/p><p class=\"no-margin\">Choose image background settings:<\/p><p class=\"no-margin\">\n<\/p><div class=\"intercom-container intercom-align-center\"><img decoding=\"async\" src=\"\/support\/wp-content\/uploads\/sites\/55\/2022\/08\/6d1762dc-fc52-4ece-9743-a9e3dfe67570.jpg\" alt=\"The section settings in Hostinger Website Builder\"><\/div><p class=\"no-margin\">\n<\/p><p class=\"no-margin\">Currently, the video background only supports video Pexels. To use your own video as a section background you <b>may <a href=\"https:\/\/www.onlineconverter.com\/video-to-gif\" target=\"_blank\" class=\"intercom-content-link\" rel=\"noopener\">convert your video to .gif<\/a> and upload the GIF as a section background image<\/b>. More details<b> <a href=\"\/support\/10420044-website-builder-how-to-add-a-video-background-to-a-section\" target=\"_blank\" class=\"intercom-content-link\">here<\/a><\/b>. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>Learn how to add videos to your website using Hostinger Website Builder<\/p>\n","protected":false},"author":581,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"include_on_kodee":true,"footnotes":""},"categories":[280],"tags":[],"class_list":["post-914","post","type-post","status-publish","format-standard","hentry","category-website-elements"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/support\/6448859-hostinger-website-builder-how-to-add-videos\/","default":1},{"locale":"es-ES","link":"https:\/\/www.hostinger.com\/es\/support\/6448859-hostinger-creador-de-sitios-web-como-agregar-videos\/","default":0},{"locale":"fr-FR","link":"https:\/\/www.hostinger.com\/fr\/support\/6448859-hostinger-createur-de-site-web-comment-ajouter-des-videos\/","default":0},{"locale":"id-ID","link":"https:\/\/www.hostinger.com\/id\/support\/6448859-hostinger-website-builder-cara-menambahkan-video\/","default":0},{"locale":"lt-LT","link":"https:\/\/www.hostinger.com\/lt\/support\/6448859-hostinger-svetainiu-kurimo-irankis-kaip-prideti-vaizdo-irasu\/","default":0},{"locale":"pt-PT","link":"https:\/\/www.hostinger.com\/br\/support\/6448859-hostinger-criador-de-sites-como-adicionar-videos\/","default":0},{"locale":"uk-UA","link":"https:\/\/www.hostinger.com\/ua\/support\/6448859-hostinger-----\/","default":0}],"include_on_kodee":true,"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/posts\/914","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/users\/581"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/comments?post=914"}],"version-history":[{"count":1,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/posts\/914\/revisions"}],"predecessor-version":[{"id":3734,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/posts\/914\/revisions\/3734"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/media?parent=914"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/categories?post=914"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/tags?post=914"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}