SITE: Swapping Main Home Image for Video Explainer

ADVANCED

Use the code on this at your own risk. If you want to have us do this for you, please send us your video hosted link (on your MEDIA tab if small, or Youtube, Vimeo, Wistia embed link etc)

The following DIV and iFrame code will create a mobile responsive element containing an iframe video element. Most, if not all video platforms will give you an iframe "embed code" when you hit the share option. The best way to use the code they give you with this below is just switch out the src="LINK" link with your link.

<div id="mainvid" style="position: relative; padding-bottom: 56.25%; height: 0;">
	<iframe src="file.mp4" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">
	</iframe>
</div>

Add the code above with your video src link, into your CUSTOM SECTION under SITE here: https://prnt.sc/tki7ct

For perfect placement, we are now going to use the actual link of the existing home image you have, this will differ for everyone, so here's what you do next

1. Open your /admin/settings and click on the SITE tab: https://prnt.sc/tki7jc
2. Go to your CUSTOM FOOTER CODE and click the ADD NEW CODE button here: 
3. Paste in the code below and before hitting save, open a new tab
4. Go to your homepage (if you have /dashboard forwarding on, just open the window in incognito)
5. Right click on your homepage main image and click "copy image url/link" option, this will copy the url of the image to your clipboard
6. Return to the previous tab in step 3 and replace the src="YOURSITE" link with the link from your clipboard. There are 2 places in the code this is needed.
7. So you can follow along, this code does 2 things, finds the existing image and inserts the video right after it in place, then hides the image so the video sits in it's spot. Neat :D

<script>
  $('#mainvid').insertAfter('[src="https://yoursite/storage/BLAH.png.png"]');
  $('[src="https://yoursite/storage/BLAH.png"]').css('display','none')
</script>