{"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-08-27T09:32:32","modified_gmt":"2026-08-27T09:32:32","slug":"6448859-hostinger-ai-builder-manual-mode-how-to-add-videos","status":"publish","type":"post","link":"https:\/\/www.hostinger.com\/support\/6448859-hostinger-ai-builder-manual-mode-how-to-add-videos\/","title":{"rendered":"Hostinger AI Builder: How to add videos in manual mode"},"content":{"rendered":"<p class=\"no-margin\">Add videos to your Hostinger AI Builder manual mode website using the video element, embed code, or a section background.<\/p><h2 id=\"h_09042f5f58\">Adding YouTube or Vimeo videos<\/h2><ol>\n<li class=\"no-margin\">Within the editor, expand the <b>Add elements<\/b> panel on the left.<\/li>\n<li class=\"no-margin\">Select the <b>video<\/b> <b>element<\/b>, and drag and drop it anywhere on your website:<br>\n<img decoding=\"async\" class=\"alignnone size-full wp-image-17214\" src=\"https:\/\/www.hostinger.com\/support\/wp-content\/uploads\/sites\/55\/2026\/08\/2026-08-27_16-28.png\" alt=\"\" width=\"441\" height=\"868\" srcset=\"https:\/\/www.hostinger.com\/support\/wp-content\/uploads\/sites\/55\/2026\/08\/2026-08-27_16-28.png 441w, https:\/\/www.hostinger.com\/support\/wp-content\/uploads\/sites\/55\/2026\/08\/2026-08-27_16-28-152x300.png 152w\" sizes=\"(max-width: 441px) 100vw, 441px\" \/><\/li>\n<li class=\"no-margin\">Click on the element to find more options (edit, duplicate, change visibility, delete, etc.):<br>\n<img decoding=\"async\" class=\"alignnone size-full wp-image-17215\" src=\"https:\/\/www.hostinger.com\/support\/wp-content\/uploads\/sites\/55\/2026\/08\/2026-08-27_16-28_1.png\" alt=\"\" width=\"629\" height=\"452\" srcset=\"https:\/\/www.hostinger.com\/support\/wp-content\/uploads\/sites\/55\/2026\/08\/2026-08-27_16-28_1.png 629w, https:\/\/www.hostinger.com\/support\/wp-content\/uploads\/sites\/55\/2026\/08\/2026-08-27_16-28_1-300x216.png 300w\" sizes=\"(max-width: 629px) 100vw, 629px\" \/><\/li>\n<li class=\"no-margin\">Click on <b>Edit video<\/b> to find more settings:<\/li>\n<\/ol><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 class=\"intercom-content-link\" href=\"https:\/\/www.youtube.com\/\" target=\"_blank\" rel=\"noopener\">YouTube<\/a><\/b> and <b><a class=\"intercom-content-link\" href=\"https:\/\/vimeo.com\/\" target=\"_blank\" 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 class=\"intercom-content-link\" href=\"\/support\/6463358-website-builder-how-to-add-animations\/\" target=\"_blank\" rel=\"noopener\">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.<\/b><\/p>\n<\/div><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><h2 id=\"h_81150abc12\">Adding Facebook videos<\/h2><p class=\"no-margin\">You can easily embed any <b>publicly<\/b> shared <b><a class=\"intercom-content-link\" href=\"https:\/\/www.facebook.com\/\" target=\"_blank\" rel=\"noopener\">Facebook<\/a><\/b> video into your website.<\/p><ol>\n<li class=\"no-margin\">Copy the URL of the selected Facebook video:<br>\n<img decoding=\"async\" src=\"\/support\/wp-content\/uploads\/sites\/55\/2022\/08\/3a491c14-9470-4e7a-93ef-88ddabd935ef.jpg\" alt=\"Facebook post menu with Copy link option highlighted\" width=\"338\" data-media-id=\"3727\"><\/li>\n<li class=\"no-margin\">Open Facebook&rsquo;s <b><a class=\"intercom-content-link\" href=\"https:\/\/developers.facebook.com\/docs\/plugins\/embedded-video-player#configurator\" target=\"_blank\" 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>:<br>\n<img decoding=\"async\" src=\"\/support\/wp-content\/uploads\/sites\/55\/2022\/08\/48e1b08d-652b-4e0b-97d2-4adcb7ad7adb.jpg\" alt=\"Facebook video embed code fields and Get Code button highlighted\" data-media-id=\"3728\"><\/li>\n<li class=\"no-margin\">Copy the <b>IFrame<\/b> code of the video:<br>\n<img decoding=\"async\" src=\"\/support\/wp-content\/uploads\/sites\/55\/2022\/08\/630cd3ce-a5d9-4506-815b-ebae16e06bc8.jpg\" alt=\"Facebook video embed iframe tab selected with iframe code shown in popup\" data-media-id=\"3729\"><\/li>\n<li class=\"no-margin\">Within your website editor, add an <b><a class=\"intercom-content-link\" href=\"\/support\/6463152-website-builder-how-to-embed-a-custom-code\/\" target=\"_blank\" rel=\"noopener\">embed code element<\/a><\/b> anywhere on your site and insert the code.<\/li>\n<li class=\"no-margin\"><b><a class=\"intercom-content-link\" href=\"\/support\/6435697-website-builder-updating-a-website\/\" target=\"_blank\" rel=\"noopener\">Update your website<\/a><\/b> and check what it looks like online.<\/li>\n<\/ol><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><ol>\n<li class=\"no-margin\">Upload your video to <b><a class=\"intercom-content-link\" href=\"https:\/\/www.google.com\/drive\/\" target=\"_blank\" rel=\"noopener\">Google Drive<\/a> <\/b>or any other cloud file storage.<\/li>\n<li class=\"no-margin\">Get an iframe code for that video. If you use Google Drive, follow <b><a class=\"intercom-content-link\" href=\"https:\/\/www.youtube.com\/watch?v=z6ElW8kKDEU\" target=\"_blank\" rel=\"noopener\">these instructions<\/a><\/b>.<\/li>\n<li class=\"no-margin\">In a new tab, open your website&rsquo;s editor. Add an <b><a class=\"intercom-content-link\" href=\"\/support\/6463152-website-builder-embed-code\/\" target=\"_blank\" rel=\"noopener\">embed code element<\/a><\/b> anywhere on your site, and insert the video iFrame code.<\/li>\n<li class=\"no-margin\"><b><a class=\"intercom-content-link\" href=\"\/support\/6435697-website-builder-updating-a-website\/\" target=\"_blank\" rel=\"noopener\">Update your website<\/a><\/b> and check what it looks like online.<\/li>\n<\/ol><h2 id=\"h_a6b98b60a3\">Adding videos to a section background<\/h2><ol>\n<li class=\"no-margin\">Within the builder, click on the section you want to edit and select <b>Edit section:<br>\n<img decoding=\"async\" src=\"\/support\/wp-content\/uploads\/sites\/55\/2022\/08\/49c10e79-747f-48c7-b519-bcf2ebdc170b.jpg\" alt=\"Hostinger Website Builder section toolbar with Edit section highlighted\" data-media-id=\"3730\"><br>\n<\/b><\/li>\n<li class=\"no-margin\">Choose <strong>Video <\/strong>in the section settings:<b><br>\n<img decoding=\"async\" class=\"alignnone size-full wp-image-16570\" src=\"https:\/\/www.hostinger.com\/support\/wp-content\/uploads\/sites\/55\/2026\/08\/2026-08-21_11-24.png\" alt=\"\" width=\"390\" height=\"224\" srcset=\"https:\/\/www.hostinger.com\/support\/wp-content\/uploads\/sites\/55\/2026\/08\/2026-08-21_11-24.png 390w, https:\/\/www.hostinger.com\/support\/wp-content\/uploads\/sites\/55\/2026\/08\/2026-08-21_11-24-300x172.png 300w\" sizes=\"(max-width: 390px) 100vw, 390px\" \/><br>\n<\/b><\/li>\n<\/ol><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 class=\"intercom-content-link\" href=\"https:\/\/www.onlineconverter.com\/video-to-gif\" target=\"_blank\" rel=\"noopener\">convert your video to .gif<\/a> and upload the GIF as a section background image<\/b>. More details<b> <a class=\"intercom-content-link\" href=\"\/support\/10420044-website-builder-how-to-add-a-video-background-to-a-section\/\" target=\"_blank\" rel=\"noopener\">here<\/a><\/b>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Add YouTube, Vimeo, Facebook, and local videos to your Hostinger AI Builder manual mode website.<\/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":[293],"tags":[],"class_list":["post-914","post","type-post","status-publish","format-standard","hentry","category-ai-builder"],"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-BR","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":4,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/posts\/914\/revisions"}],"predecessor-version":[{"id":17216,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/posts\/914\/revisions\/17216"}],"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}]}}