how to link vimeo on demand to shopify

hey shopify users if you would like to,show videos like this with the video,section on your dawn theme,please stick around and i will show you,how you can achieve this so if you're,familiar with the video section on dawn,theme,it does not allow you to show,any videos unless you have them hosted,on youtube or vimeo,and,secondly,it also has this default play button,that you have to click to have your,videos,play so,if you take a look,like this play button so you play it and,it shows a youtube video and then you,again have to click the youtube video so,it's kind of odd even if you,know some coding you change this to show,video you still will see the same,behavior that you click the play button,and then you have to click again to you,know play the video underneath so,what i'm going to do is i am going to,modify the code so you have a,solution to show your own videos when i,should say own videos i mean you can,have them hosted at shopify or some,other cdn you don't have to put them on,youtube and vimeo so that's the first,thing and secondly,we will get rid of that play button and,the video will work across all your,desktop and,mobile devices,okay so,first thing,first you should always create a backup,of your theme just duplicate your theme,rename it and then work on that till you,have everything working and then you can,switch over to,that version of the theme,and,we will start with,editing the code,you will go into,video.liquid file which is in sections,towards the end video dot liquid so this,is the file that shows the video section,and then what you are going to do is,look for,this tip right here deferred media and,we are going to delete some of the stuff,that is in here so you see this button,right here from here select all the way,down,until where this next button closing tag,is,and delete that,after that you are going to delete this,template and then this template tag here,and get rid of some of the spacing here,and,next what you will do is here where you,see this youtube and then this else you,are going to copy this,and paste in here like this,and then,combine this to say,else if so it's the null set without any,remember that and then,section dot settings video you'll type,youtube change this to,vimeo like this,and,next,hit enter before this end if,and,here we are going to add some code just,basically a,video tag,and,right here paste this,and,then also,before this video,tag,you're going to,add,else like this one here,so if,this else this then else that okay so,after this uh you are seeing this right,here settings video file url so this is,basically where we'll get the url for um,videos so what we need to do is go down,to the settings area,right around where you see this video,url setting hit enter,and you're going to paste this and,always make sure,these brackets should,start and end and then there should be,comma after each block so,one little mistake can break,your file and uh easy to fix but it's,better to take care of it while you're,typing and,that's it so what we pasted is this url,setting and this is what we're,referencing above in the code already,now just save this,and,as i was just saying,little things can break your code the,problem we have is not here but it is up,here,so you see this vimeo right here so,actually this is good this happened,because,you should know how very little things,can break the code so you see this vimeo,you just have to add,a quote right there,all right so now let's save it,all right file is saved,moving on let's check out what we have,so far in the customize area,so let's go into,here,refresh this,so on the right hand side you're gonna,see there's an extra url field that's,added this is the one we added and uh at,this point what i will do is i will also,just get rid of this youtube url up here,and,now,you need to,do some more changes let's go back into,the code,and look for this deferred media div,and in here,move to the right and where you see this,clause look for the ending quotes of,this clause that will be around here,there's an end if right here so you're,going to,click in here,and we are going to paste some code in,here,so,pasting the code and what i pasted is,this,right here so basically if that file url,is there then we are applying this,class,and then save,and next let's go to,your css file for the video which is,video dash section dot css it is in the,assets folder,uh right here video dash section dot css,so at the end we are going to add just a,bit of custom css,and that is,this,and now,save,next,let's get a url for the video so,if you don't know already you can just,upload a video file to,your shopify and i'm not going to get,into the details but quickly it is under,the settings area here are the files you,can upload your file in here and once,you have it uploaded just copy the url,of your video so i already have videos,in here i am going to copy a url,and let's go back to,the customize area,where is it right here,so post that,link in here,and you can see the video on the left,side showed up,save,and,if you go take a look on the site,here is the video showing so one,important thing to mention here about,autoplay is you're not going to,have the most consistent behavior across,different browsers mobile desktop,uh if you want to auto play a video it,will,mostly,not auto play if it has sound and that's,for privacy reasons you know nobody,likes a video that you know you go on a,website and it starts to,play with sound so,um,so,what i am going to do is i'm going to,tie some of these options,to,different settings,go all the way down,where you had added the video url,this url file url and then hit enter and,you're going to have these two settings,one is to control the autoplay and one,is to show those controls these controls,here maybe you don't want these controls,so we can tie those to a setting,and,then,save this and then we are going to go,back up,to this area and where this auto play,muted controls,i am going to,modify this,so i am tying them to the settings we,just added so auto play muted so i am,combining them because if you are going,to auto play it needs to be muted as it,has sound so,um,so that is one setting and then the,second one is the related to controls,now you save this,and you're gonna see just a still image,like it's not playing and that is,because,we have tied those settings,to,the the attributes to the settings so,refresh in the customize area so you can,control those settings from here,so now if i do auto play,you can see the video is playing with no,controls now we go back,click this show controls,save,and now we are going to have,controls,and it is auto playing too so,um,next thing what i want to show you is uh,related to bombo browsers especially,safari iphone devices,there is a setting you need to add and,what that is,right here where you see all these,attributes and there's this,greater than sign just hit enter to make,some space and then here right before it,or you could keep it on one line it'll,just get too long,it's up to you but you just need to add,this poster equal to there's this long,path oops,this long part this is the,part of a picture,basically a image of the video that i,added so,when the video isn't playing,that image is going to show on the,mobile devices if you don't do this i,don't know about other devices that i,know on iphone you will just get this,play button with like huge white space,in place of the,video which does not look good so,this way your video will look much,better uh you know it you,it is,not on autoplay uh it will show an image,in the background instead of just big,white space,and that's it just save this,with this change of course here nothing,changes on the desktop but that setting,was mainly for,mobile browsers so,that's pretty much it and one last thing,i'm gonna show you is that you still,have the,ability to show your youtube and vimeo,videos,and,these two settings are just related to,this video so get rid of,these,and i am going to,put back,the youtube link in this first field,and now if we go back to the site,here it is you still have your youtube,or if you had a vimeo you can still play,it the same the only thing is you have,that play button there and i told you,how,that had a weird behavior anyway so,that is it guys if you like the content,please like the video subscribe to the,channel and i will see in the next video,thanks

Congratulation! You bave finally finished reading how to link vimeo on demand to shopify and believe you bave enougb understending how to link vimeo on demand to shopify

Come on and read the rest of the article!