{"id":65348,"date":"2016-02-29T04:59:09","date_gmt":"2016-02-29T09:59:09","guid":{"rendered":"http:\/\/www.templatemonster.com\/help\/?p=65348"},"modified":"2016-04-07T10:28:51","modified_gmt":"2016-04-07T14:28:51","slug":"prestashop-1-6-x-how-to-add-background-video-with-tm-media-parallax-module","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/prestashop-1-6-x-how-to-add-background-video-with-tm-media-parallax-module.html","title":{"rendered":"PrestaShop 1.6.x. How to add background video with “TM Media parallax” module"},"content":{"rendered":"

This tutorial will show you how to add a background video with “TM Media Parallax” module in Prestashop 1.6.x.<\/p>\r\n\r\nPrestaShop 1.6.x. How to add background video with “TM Media parallax” module<\/a>\r\n

Media Parallax<\/strong> is a module which allows to add a background image or video to some modules (such as Theme Configurator, TM HTML Content module, Homepage Blog, etc.) on your site with a parallax (moving) effect.<\/p>\r\n

In order to add a background parallax video, you need to perform the following steps:<\/p>\r\n

    \r\n\t

  1. Retrieve an id of the element which you want to set the background video for. To do this, you need to open your website front-end, right click the area which will have the background parallax video and click Inspect<\/strong> or Inspect element<\/strong> button (depending on your browser). You need to save this id somewhere or remember it, it will be used in the future when you set up a video:<\/p>\r\n\r\n\"PrestaShop<\/a>\r\n\t<\/li>\r\n\t

  2. Log into your admin panel and navigate to Modules -> Modules<\/strong> section.<\/p>\r\n\t<\/li>\r\n\t

  3. Look for the Media Parallax module<\/strong> and press the Configure<\/strong> button to access its settings:<\/p>\r\n\r\n\"PrestaShop<\/a>\r\n\t<\/li>\r\n\t

  4. Press the Add Container<\/strong> button to add a new parallax block.<\/p><\/li>\r\n\t

  5. In the Selector<\/strong> field put the id you saved earlier with a hashtag before it. In Parallax type<\/strong> option select video<\/strong> and choose a video file in .mp4<\/strong> format. You also need to upload the video in .webm<\/strong> and .ogv<\/strong> for cross-browser support into modules\/tmmediaparallax\/media<\/strong> folder via FTP or hosting cpanel filemanager. Image poster can be .png, .jpg<\/strong> or .gif<\/strong>. When everything is set – save the newly created block:<\/p>\r\n\t\t\t\r\n\"PrestaShop<\/a>\r\n\t<\/li>\r\n\t

  6. Check your updates on the site frontend:<\/p>\r\n\t\t\r\n\"PrestaShop<\/a>\r\n\t<\/li>\r\n<\/ol>\r\n

    Thank you for watching our tutorial. Now you know how to add a background video with “TM Media parallax” module.<\/p>\r\n\r\n

    Feel free to check the detailed video tutorial below:<\/p>\r\n\r\nPrestaShop 1.6.x. How to add background video with “TM Media parallax” module<\/a>","protected":false},"excerpt":{"rendered":"

    This tutorial will show you how to add a background video with “TM Media parallax” module in Prestashop 1.6.x.<\/p>\n","protected":false},"author":93,"featured_media":65354,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[732],"tags":[1008,2197,557,552,527],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/65348"}],"collection":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/users\/93"}],"replies":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/comments?post=65348"}],"version-history":[{"count":0,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/65348\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media\/65354"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=65348"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=65348"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=65348"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}