{"title":"Video Section \u0026 Background Video","description":"\u003cp\u003eVideo Section \u0026amp; Background Video work for Shopify and Shopify Plus stores, handled as a flat-rate task by an in-house team that has worked on this since 2016.\u003c\/p\u003e\u003cp\u003eWe have completed 124 video section \u0026amp; background video requests for merchants, including work on Testament, Turbo, Icon and Mobilia. Typical turnaround is 1 to 2 business days. Below are 4 real examples with the request, the approach and what shipped.\u003c\/p\u003e","products":[{"product_id":"background-video-on-homepage-and-hero-testament","title":"Background Video on Homepage and Hero","description":"\u003cp class=\"task-lead\"\u003eA fitness brand wanted a full-screen, responsive background video to replace their static homepage hero.\u003c\/p\u003e\u003ch2\u003eThe request\u003c\/h2\u003e\u003cblockquote\u003e\n\u003cp\u003eI want a full-screen responsive background video in place of the current slideshow. The theme developer recommended you. It needs to work on every device.\u003c\/p\u003e\n\u003ccite\u003eOriginal customer request, anonymized\u003c\/cite\u003e\n\u003c\/blockquote\u003e\u003cp\u003eThe brand had shot video and wanted it front and center. Their theme didn't support video heroes.\u003c\/p\u003e\u003ch2\u003eThe approach\u003c\/h2\u003e\u003cp\u003eWe built a video hero that fills the viewport on desktop and tablet with muted autoplay and a fallback image on phones to keep the page fast. The brand controls the video and overlay text in the theme editor.\u003c\/p\u003e\u003ch2\u003eWhat we shipped\u003c\/h2\u003e\u003cul\u003e\n\u003cli\u003eFull-viewport video hero on desktop and tablet\u003c\/li\u003e\n\u003cli\u003eFallback image on phones\u003c\/li\u003e\n\u003cli\u003eVideo and overlay text controlled in the theme editor\u003c\/li\u003e\n\u003cli\u003eMuted autoplay and loop\u003c\/li\u003e\n\u003c\/ul\u003e","brand":"TaskHusky Portfolio","offers":[{"title":"Default Title","offer_id":44154838450250,"sku":"TASK-0055","price":0.0,"currency_code":"USD","in_stock":false}]},{"product_id":"youtube-and-vimeo-embed-turbo","title":"YouTube and Vimeo Embed","description":"\u003cp class=\"task-lead\"\u003eA brand's homepage video required two clicks to play. They wanted it to play immediately.\u003c\/p\u003e\u003ch2\u003eThe request\u003c\/h2\u003e\u003cblockquote\u003e\n\u003cp\u003eOur full-width video on the front page needs two clicks to play. The theme developer said this is best suited for you. Make it play on the first click, or better, autoplay muted.\u003c\/p\u003e\n\u003ccite\u003eOriginal customer request, anonymized\u003c\/cite\u003e\n\u003c\/blockquote\u003e\u003cp\u003eA video that made customers work to watch it.\u003c\/p\u003e\u003ch2\u003eThe approach\u003c\/h2\u003e\u003cp\u003eWe set the homepage video to autoplay muted with the option to unmute, replacing the two-click embed. On mobile it shows a poster image with a single tap to play.\u003c\/p\u003e\u003ch2\u003eWhat we shipped\u003c\/h2\u003e\u003cul\u003e\n\u003cli\u003eHomepage video autoplays muted\u003c\/li\u003e\n\u003cli\u003eUnmute option\u003c\/li\u003e\n\u003cli\u003eSingle tap to play on mobile\u003c\/li\u003e\n\u003cli\u003ePoster image on mobile\u003c\/li\u003e\n\u003c\/ul\u003e","brand":"TaskHusky Portfolio","offers":[{"title":"Default Title","offer_id":44155687239754,"sku":"TASK-0224","price":0.0,"currency_code":"USD","in_stock":false}]},{"product_id":"video-on-product-page-icon","title":"Video on Product Page","description":"\u003cp class=\"task-lead\"\u003eA brand wanted to upload a different video to each product page and have it appear in a consistent place.\u003c\/p\u003e\u003ch2\u003eThe request\u003c\/h2\u003e\u003cblockquote\u003e\n\u003cp\u003eI want a video element where I can upload a different video to each product page. Same spot every time, just different content.\u003c\/p\u003e\n\u003ccite\u003eOriginal customer request, anonymized\u003c\/cite\u003e\n\u003c\/blockquote\u003e\u003cp\u003ePer-product video without a per-product template.\u003c\/p\u003e\u003ch2\u003eThe approach\u003c\/h2\u003e\u003cp\u003eWe added a video section to the product template that pulls from a per-product field, so the brand attaches a video in the admin and it appears in the same position on every product that has one.\u003c\/p\u003e\u003ch2\u003eWhat we shipped\u003c\/h2\u003e\u003cul\u003e\n\u003cli\u003ePer-product video section\u003c\/li\u003e\n\u003cli\u003eVideo attached from the product admin\u003c\/li\u003e\n\u003cli\u003eConsistent placement\u003c\/li\u003e\n\u003cli\u003eHidden on products without a video\u003c\/li\u003e\n\u003c\/ul\u003e","brand":"TaskHusky Portfolio","offers":[{"title":"Default Title","offer_id":44155697201226,"sku":"TASK-0334","price":0.0,"currency_code":"USD","in_stock":false}]},{"product_id":"video-autoplay-and-mute-and-loop-mobilia","title":"Video Autoplay and Mute and Loop","description":"\u003cp class=\"task-lead\"\u003eA brand wanted a looping wireframe video at the top of the homepage that matched a video section lower on the page.\u003c\/p\u003e\u003ch2\u003eThe request\u003c\/h2\u003e\u003cblockquote\u003e\n\u003cp\u003eWe'd like a wireframe video loop at the top of the page. It should look like the wide video at the bottom: muted, looping, no controls.\u003c\/p\u003e\n\u003ccite\u003eOriginal customer request, anonymized\u003c\/cite\u003e\n\u003c\/blockquote\u003e\u003cp\u003eConsistent video treatment top and bottom.\u003c\/p\u003e\u003ch2\u003eThe approach\u003c\/h2\u003e\u003cp\u003eWe added a muted looping video at the top of the homepage matching the treatment of the existing lower section, with a poster image on mobile.\u003c\/p\u003e\u003ch2\u003eWhat we shipped\u003c\/h2\u003e\u003cul\u003e\n\u003cli\u003eMuted looping video at the top of the homepage\u003c\/li\u003e\n\u003cli\u003eMatches the existing video section\u003c\/li\u003e\n\u003cli\u003ePoster image on mobile\u003c\/li\u003e\n\u003c\/ul\u003e","brand":"TaskHusky Portfolio","offers":[{"title":"Default Title","offer_id":44155716206666,"sku":"TASK-0441","price":0.0,"currency_code":"USD","in_stock":false}]}],"url":"https:\/\/www.taskhusky.com\/collections\/video-section-background-video.oembed","provider":"TaskHusky","version":"1.0","type":"link"}