how to embed full width html video shopify page

in this video, I'm going to show how to embed a youtube,video responsively and the easiest way to do,it and what I mean by responsively is that,the standard embed from youtube has a fixed horizontal and vertical,width so if you want to be responsive so that,it adjusts to different size screens like going from a phone to,a computer then it needs to be responsive,so let me show you an example of one that I've created that is responsive,and so here you see it's a full-size video,and then if I shrink the browser window it automatically adjusts,with it here you can see it's getting smaller,and then i can expand it more and it just,automatically adjusts as i expand it and we can even try to see if it works,while it's playing too,and this will also work on mobile so when you look at it on the phone you're,going to see it adjust automatically to the size of the phone whether the phone,is in horizontal or vertical mode so the standard way of embedding a video,is to go to youtube and go down to share,and click on the embed code here and it gives you,a iframe window which has a fixed width and a fixed height which you can adjust,the settings of by changing those numbers however,just putting 100 into those into the width for example,does not work because the height is still fixed so maybe the width will,adjust 100 but the might the video might be cropped in the,height so let me show you what happens with a,one where we just do the regular way of embedding this video,in this case i'm using shopify i'm trying to embed this video into shopify,so i'm going to go to the shopify editor and i'm going to click on the,html script i'm going to stick it in the code,where i want it to be so i'm putting that embed code in there,i'm just going to make a space here so you can see it so here's the embed code,now we'll save that we'll go to the page and refresh this page to see if it shows,up in there,there it is okay you see how this is a fixed size so it didn't adjust the,size of the page and if in fact if i change this browser,window size it's still going to be a fixed size so,when the browser window gets narrower than the video itself then you,can't see all the menu you can't see the menu options on the video anymore,like the maximize to full screen which was the biggest problem i was having,with mobile is like this was this video was cropped and he,couldn't make the videos full screen when i searched on how can this be,resolved one of the first things i came up with,was many people talking about in putting css,code into your shopify store for example or,into your website and then every time you embed a youtube video,using some identifiers that will call that css code,and automatically adjust the size now although that may work,i can get it to work in the shopify store and also,was skeptical about well what happens when i change my template,it's going to fail rather than the css code embedded,with the iframe in some way or embedded with the,in the actual description where if i change the,templates then it's going to automatically update,so how do we create this so how do we create this responsive,youtube video in bed fortunately there's a,website called embedresponsibly.com i'll provide a link,to this down below in the description it has,many different things that you can embed one of them being youtube videos,so what you do is you go to your youtube video,you grab the video link go to embed responsively,paste that in there and click embed and then you're going to be shown the,video and down below you're going to see the embed,embed code so copy and paste this embed code and you see this embed code there's,just some css in here that is doing the adjusting of the size,to make it responsive so copy that come back to the product description,page on shopify or wherever you want to insert this into,your website and go to,so here is the wysiwyg editor and then click on your html so you can get it in,html and i'm going to remove this iframe the default youtube iframe that was,stuck in there just a minute ago and insert this new embed code,from embed responsively.com that's in there now go back to show the,editor it looks like it's already,responsive in terms of like it filled up the the size properly,so let's save that and refresh this screen,may need to do it a few times before it comes up,so here's the strangest thing is that if you go to,try to view it right after you've inserted that code it's not gonna show,up for about five to ten minutes or so,and so you're just gonna see a blank area where the video should be,and even on mobile it won't show up but then eventually it shows up so you just,have to wait and be patient and it's gonna i don't know what it's,doing shopify is processing something but it's going to show up and then after,that it just keeps working,so i found out that you can't view the responsive video in the preview you,actually have to go to like right now right now i'm in the,preview and it's not showing up you actually have to go to the real page,that's on the internet so just go to the website and then,this will show up boom and when i change the size of the browser window,it's going to adjust automatically,and responsibly pretty cool looks great in mobile too,so you can even play it and you can try to adjust,the size it'll be responsive how's it just,you

Congratulation! You bave finally finished reading how to embed full width html video shopify page and believe you bave enougb understending how to embed full width html video shopify page

Come on and read the rest of the article!