This new settings and ability to pick files from the customizer also allows videos to be connected as a dynamic source directly, rather than having to separately host videos in Vimeo and Youtube to link via URL.
The new video input setting even has an option to directly upload a cover image directly - so no move building this in as a separate setting for merchants as it's all managed directly in the customizer setting for the video.
Introduction
Shopify added the ability in input settings to use a video from our files rather than having to host it on someplace like YouTube or Vimeo. This makes things way easier to manage, eliminating an extra step for a merchant or whomever to go and host that somewhere else just to pull back a URL and drop it into an eye framer, whatever. This is really simple and easy to use. We're going to, in a little bit more of a developer eVideo, go through the process of adding to the existing section for video in Dawn, so that way we can now support this new video input setting. Let's do it.
New Video Setting on Shopify Docs
Okay, so if you go into the docs, you'll see that there is now a new setting here just for videos, and it pulls video object here. And so yeah, this is super helpful. It lets us reference it, we can even pull it as a dynamic source, so this is really handy if you have things like maybe for a page or a product video or something like that that you want to reference that way, we can set it up as a meta field value kind of type thing too. Really cool. But what we're going to do at least is add this as an extra deal in Dawn. So the 7.0 I think is what we're working with here. Let me see.
Yeah. Yeah, so 7.0.0. So different versions might have this built-in, but at least at the time of this recording, they haven't built in the new input setting, so I thought why not just go through the process of adding it? So this is something that would be really common of a job when you're working as a developer or a freelancer in Shopify, rather than building out a whole brand-new section where we would just essentially add another section here. A lot of times what I like to do is just add an addition to the existing section, make it easier for merchants to work with. So let's take a look at what that looks like.
Editing Code on the Cloud Based Editor for Video
So I'm going to drop back over into here, and if you get into the updated copy of Dawn, I'm going to use the cloud-based editor. I don't typically use it, but for the purpose of these demos, it's really nice and easy not to have to run some separate process and stuff.
And it can all be done in here, so easy enough. So what we want to do here, this is just what it looks like. The video section here is over here in your files under sections, and then just the video.liquid file. And we'll drop in here, and you scroll down, you can see all this fun stuff here. Basically, it's set up so that way it loads the image and the play button over top. We want to obviously maintain that same, that same exact functionality, so what we'll do is we'll just kind of add an if-else kind of type thing where we're going to use a liquid conditional and say, "Hey, check and see if they use the file picker option for the video." If they did, use that, if they didn't, go ahead and use the default functionality here. And you can do this with a lot of just borrowed and updated coded logic here.
Image Picker and Cover Image
So I'm going to scroll down here, and you can see here for the image picker and cover image in these settings, that's over here. So you have the option on this, and this is to support basically best practices for not immediately loading video, video's a little bit heavier, obviously, so not having to load that. So there's some lazy loading, fun stuff going on kind of type thing but we're not taking the performance hit, and so we're going to want to maintain the same functionality.
Real Time Coding Example
So what I want to do, just to make this really plain what we're doing here, let's go ahead and just do a header with content. Whoops. Yeah, there we go. New video and new video option. And let's go ahead and make sure we don't break this here. And another one in here for old video option. So I'm going to add this content under the new video option just so that way we can see it, and then it'll show up in our settings as well, in a way that makes sense.
So dropping back into here for the video settings, go ahead and just copy this guy. That will be simple. And we'll jump back in. Add this. You can see, oh man, our formatting is all messed up and not pretty. I miss VS code so much when this stuff happens. And this will just build in the actual setting itself. So obviously, we're not going to do anything, we haven't linked it up to anything, we've just added the option here. Now, we'll go back here, we'll do a quick refresh, non-emphasis on quick. And you can see here, there's a video in here as I have like one video that I just uploaded here. And for those of you that are trying to figure out where that comes from, if you go into this, you can go into your settings and then scroll down to files, and you can upload them this way.
So this is where you can upload your videos and whatever just to see that. Okay. And then we'll come in here. Let's go ahead and, whoops, sorry, let's just remove this so you can see what this looks like. So the new video option is here, Shopify-hosted video, that's the section setting that we added. We'll go ahead and select it, and then you can grab it here. Okay, nice thing about this is, with the new file picker, you can actually search, so this is on the image picker, the things that we want that hasn't been built in yet. So if you name this something that you can actually find, it'll actually pull up here and it'll sort through everything. Really, really nice. Okay.
Linking Video Up To The Code
So you can see, even though we've picked this, nothing happens, and so that's because we haven't linked that up in the code yet. We just added the option to add these settings.
So I'm going to go ahead and jump back into the code over here. And let's scroll back up. And you can see there's a lot of this code here. Really, it looks way more complicated than it is. Really, what we want to start looking at is from this noscript option. This is where we're loading in an image over top of the, I'm sorry, over top the video here. This is just where that part begins. So what we want to do here is find all that code, so we've got that noscript option, that's for image fun stuff, and then this deferred media, same fun stuff. So we're not loading those images, those videos right away. And then this is all the way down to the template and deferred media.
Adding a Liquid Conditional
So from all the way down here, let's just go ahead and grab all this. Okay. And what we want to do now is just add a liquid conditional in here. So if section.settings.video is not equal to nil, and something that trips people up sometimes here, make sure in your input settings, find out what happens if it's not called. So had that happen where, "Hey, it's checking to see if it's not blank," but that's not necessarily working out or whatever. Sometimes you just make sure that you're actually referencing the proper term here. So if it's not equal to nil, we wanted to do a bunch of stuff else. And then at the very end of this, we're going to drop all the way down where that deferred media was where we stopped here, and you can throw an endif in there. Obviously, we want to clean this up if we were another code editor, but we're doing the best we can here.
Okay, cool. So here's all of our stuff. We're actually not going to need iframe to get pulled in through the template here. Going to pull that out. We'll want a bunch of this stuff, yada, yada, yada.
Preview Image Option for Video
And so here's where I want to start up here. So if section.setting.video is not equal to nil, and then we're pulling this stuff. Now, what we don't want to do, we don't necessarily want to worry about that cover image, so the nice thing about the video, I'm going to drop into this guy here, so with the video object here, it actually gives you a preview image automatically. So let's use the preview image option, and we'll cover what that looks like here in a sec.
But what we want to do then, oh, I'm sorry, we want to reference this video, and then obviously if we're going to reference the preview image, so what this will look like then instead of cover image, video.preview image. Ooh, is that new? Started doing some fun little auto-complete stuff for me. That is handy. And I'm going to back out of this a little bit, guys, just so that way y'all can see that a little bit better, maybe. And here's what I want to do, if I'm in my sections.video here, I want to replace the references that we had to the other items 'cause I want to use our new stuff. So same thing, I'm going to want a cover image here. Hopefully, I can figure out how to speed through this, and you don't have to just sit here, watch me.
All right, so I think I grabbed all those, probably get an error here in a minute, so we'll take a look what that looks like.
Liquid Filter for Video Tag
But all right, now we're down on the template. So you can do this a couple of different ways. Basically, the way that I would recommend doing it is using the liquid tag we have for this, or I'm sorry, a filter. So we have a liquid filter here for video tags. And so, whoops, here we go. So optional supported HTML5 attributes for the liquid tag. So you can do everything from autoplay, all this stuff. So I would just go ahead and grab this guy here. Again, this is in docs under the API reference for video tag.
So what we can do is we can drop back into our theme here, and instead of media, you'd want section.settings.video, and then our video tag, autoplay. Cool, because as soon as we hit the play button, we're going to want it to just go ahead and start playing. Looping, probably. Yeah, let's leave it on for now. Muted and controls all those fun stuff or whatever. Okay. So, yeah.
Previewing the Final Result
All right, let's see what this looks like. Go ahead and save this guy. Okay, it did save. So far, so good. And cool, we've got our preview image here, which if you want to see what that looks like, you can just change that under the cover image here. See, but they don't use similar terminology necessarily, but that's uploaded directly in here, so we can do it that way.
It gives you just a reference there, but you need to update that. And at some point, apparently, I did that. And so you just come in here and change and upload your own. I've got ALT text in here. Please include ALT text on all videos. It is not cool to make things not accessible. That's what the purpose of ALT text is in addition to SEO benefits. Okay, so let's click on this guy. Bam. Okay, we've got an issue here with our sizing, so that doesn't look awesome. Let's make sure it's pulling in though. So it is pulling in. This is running just fine. Probably what this is is we need to edit the video tag so it just doesn't basically take up more space than it needs to here. So real quick, simple fix here. So just do video, max-width: 100%.
Obviously, this is not the most performant method and how I would typically do this or whatever, but be cool, please. And there you go. So you can see there, our little in style tag here, just went ahead and did that. So now we have the option just directly within Shopify here, if you want to add additional video files and stuff like that. This makes it really simple, easy for merchants, brands, marketing agencies, whomever you work with. Even maybe if you're a tech-savvy brand or merchant yourself and you want to drop in here, grab some of this stuff, that's what I would try doing, potentially. So working with this version of Dawn, and then, yeah, not having to worry about hosting this elsewhere. This all just works directly with the video hosted in your Shopify files. So let Shopify handle that mess for you.
Closing
So I hope this was really helpful. Again, the purpose of this really is just to extend the existing functionality within Dawn rather than building out a brand new video section. The only thing that we did really was add in a couple of settings. We used existing HTML and Logic rather than having to bring in another library or something like that. And again, this allows for you to host videos directly on Shopify, pick it from the file picker, rather than having to worry about Vimeo, YouTube, whatever kind of type thing to host, and so that's always positive, right? So hopefully this was helpful, and see you all next time.