hi everybody my name is john and in this
video we're going to learn how to embed ,different types of videos onto your shopify store
so the first thing we're going to do is if we're ,using a small video and a very short video we're
going to use the file manager within shopify ,to embed that file on one of your pages or on
your actual home page itself or in one of your ,products so if you have that video you're going to
go into settings and then files and then click on ,the upload files button and select the video file
from your computer i've already uploaded my file ,and it's located right here so the next
thing i'm going to do is copy the url,and then i'm going to go into my
online store so let's go and add ,this file onto the home page of my theme
so in order to do that click on customize,and then click on add section custom html,and then select,now if you click on this custom html button
you'll see the html that already exists on ,the page right here i'm going to delete all this
html and then i'm going to use the following code ,to embed on the page i'm going to copy and
paste this code within the video description ,and include a link to it within the description
itself so don't worry about pausing this video ,and rewriting everything there's going to be a
link in the video description to copy this code ,i'm going to take the url from my file
manager that i copied earlier i'm going ,to paste it within this section that says your
video link here so i'm just going to paste that ,url and then i'm going to copy all of the code
here and then paste it within the html section,and now you'll see that i have my really nice
video on the home page with some controls at ,the bottom to adjust the volume start and stop the
video and make it full screen so this looks pretty ,nice how do we add this on a product let's exit
this page and then go into our products i already ,have a product made but you can also click on
the add product button to start from scratch,so what i've done in this
product page is i've embedded ,html but you can also embed the
html code that you copied earlier,and then save this so that it's visible on your
product page itself if we preview this page ,we'll be able to see that video
playing right here on your product ,this works really well with small videos and
videos that are below a certain file size ,watch what happens when i try to upload a video
that's too big into my file manager for shopify,so you'll notice that the file that i tried
to upload is too large so if you run into this ,situation you're not going to be able to use the
method that we just went through and using that ,special code we'll have to find a workaround with
youtube so what we can do in this situation is ,that if we have a video that is larger than
20 megabytes or is longer than four minutes ,either one of those we can upload the video to
youtube which is completely free and then we ,can go and embed that video onto either one
of our product pages or the online store so ,let's go through that process now so let's
imagine that i've created a youtube account ,and i've uploaded my video file that's longer
than four minutes and larger than 20 megabytes ,and here it is in front of me now so commonly
what you'll hear from other folks in terms of ,tutorials is that you'll hear to go down here
into the share button and then click on embed ,and this will work but it doesn't give you
the options that you really want if you're ,embedding this on a product page because if
you embed the code that they give you here ,it's going to not autoplay it's not going to have
some of the repeat options and the looping options ,that we need and we're also really limited on
how we want to resize this different iframes and ,make sure that we have some of the branding
taken away from youtube so what we can do ,instead of copying the embed code here is we can
simply just copy this url at the top of the page ,and then go to the following url and i'll include
a link to this url in the video description below ,so this page is wired.com which is my site slash
tools slash youtube video embed and what this page ,does is it allows you to paste the video video id
that you're trying to embed on shopify and then ,modify the ditch different options for the embed
code so as an example this is just the url that i ,copied earlier then i'll press enter and i can
see what this video is going to look like once ,it's embedded on my site on the right hand side so
now what i can do is i can auto play the video and ,i can loop the video once it's done playing and
there's a few other options under appearance and ,control options as well so if i wanted to remove
the youtube button right here i could click on ,modest branding you'll see that youtube button
is removed if i wanted to always show captions ,or always disable annotations i could also
do that from the appearance section here ,and i can also disable the full screen
button and also disable all player controls ,so now when somebody goes and starts watching
this video it's going to auto play it's going ,to repeat it's not going to have any of those
video controls at the bottom if someone on your ,site on your shopify site specifically goes and
pauses this video it's going to have a more videos ,option at the bottom contrary to popular belief
youtube removed the ability to remove this section ,when videos are paused so no matter what you
will have this section at the bottom here ,if your video is paused on your site but what
you can do to make it a little bit less annoying ,is you can enable this button here that says
same channel related videos only and this will ,only show videos when the video is paused that
are related to the channel that was originally ,uploaded this video so it makes it a little bit
safer than just having random videos on this ,embedded video here so now that i have my embed
looking really nicely on the right hand side ,i can copy the embed code that has
automatically been updated this entire time ,so i'm just going to copy that and then
i'm going back into my shopify store so ,now i have the embedded code copied i can go into
products i can go back into my product with video ,and now if i click on show html there's an option
that i can do here which is to just paste that ,iframe that we copied earlier or what i can do
is i can go back into the non-html editor and ,i can click on the button here that says insert
video and i can paste my iframe code here as well ,it's the same exact thing as if i went into
show html so now i can see my video playing ,and of course it auto plays so now if
i save this and then go into preview,it will have my nice video right here on the page
a few important notes you'll notice that the video ,is not auto playing and this is because in chrome
there are very certain restrictions on whether or ,not any type of video will autoplay on a page if
you were to go through this tutorial in safari or ,internet explorer or another web browser the video
would auto play every single time there really ,isn't a work around to this it's one of those
features that chrome enabled that is not possible ,to disable through this embed option there's
also some restrictions that you have based on ,your theme on how you can actually resize a video
like this so if you're having issues on this page ,right here adjusting the width of this video
and the height make sure that your theme isn't ,overwriting these settings with its own custom
video settings and you can see this within your ,theme code if you're really savvy or you can ask
one of your developers to take a look instead,there's one other option that i wanted to show you
and that is if you add the media from a url some ,themes will support embedding the youtube
video directly within this section here ,there are going to be situations though with
the majority of themes where it is not supported ,and you'll notice that it's not supported
when you copy the url from youtube ,paste it within this section
and then click on embed media ,you'll notice that this is not supported
on the current theme that i'm using ,because it has this warning box right here so
even though i have the video that it looks like ,it's in the media section it won't actually
show up if i go and view this on my on my site,notice no video here even though that it says it's
in the media section this is a theme limitation ,and you should contact the theme developer or
when you're purchasing a theme make sure that ,you're purchasing a theme that supports adding
youtube videos using this embed section from media ,really important if you're not savvy with
the theme code you're not going to be able ,to modify this yourself to support showing
videos within this media section in this case ,it's usually just best to go back into the tool
that i built here and embed the code yourself,now for the same thing with shopify
pages if we go into the online store ,and then click on pages we can add a page and
then we can click on either the insert video or ,we can click on the show html button and again
you just need to go back to this custom video ,embed generator copy the embed code and
then paste it in the content section here,and here's my video playing on the page itself ,you can always go back and customize each one
of these different options on the left hand side ,but when you customize each one of these options
make sure that you copy and paste the new embed ,code on each one of your pages to update the
video i hope this helped and if you have any ,other questions please leave a comment below i'll
include links to this custom video embed generator ,and also include a link to that custom code
that we copied earlier for videos that are ,lower than 20 megabytes in less than four
minutes thanks enjoy the rest of your day you
Congratulation! You bave finally finished reading how do i set my blog to show my profile shopify pop theme and believe you bave enougb understending how do i set my blog to show my profile shopify pop theme
Come on and read the rest of the article!