13. Youtube & Vimeo Embed Videos

Video Summary

All right, we’re gonna go over how to place YouTube and Vimeo videos into your website. Lucky for us, YouTube and Vimeo makes it super easy to put their videos on our site. All we have to do is get on there and copy and paste the code over and we instantaneously have their videos. Let’s hop over to code pen and figure it out. 

So right now in code pen, I don’t have any code in our HTML, we’re gonna go and pull that from our YouTube and Vimeo sites. So start off with YouTube. When you go here and you’re actually on the video page. If you come over here and click on Share, one of the first options is called embed. And if we click on here, right here is the code that we need to copy and paste over. So if we click in here, and we do Control C, or Command C, and we come over here to code pen, replace that in. 

And now we have that video right there. So maybe you want to have a couple of videos and you don’t want them to have them stacked right on top of each other. So we’re gonna do is we’re gonna put a VR live break right there, and we’re gonna come over here to Vimeo and it’s very similar we have we click on Share, and they have a nice little embed section right here. It’s a little bit small, but as long as you can just get your your aicar your cursor in there, it will highlight everything. If not just click Command or Control all Ctrl C to copy it, come over to code pen, and we are going to place that in and now we have that video. Now what when you do a when you do a Vimeo video, what you might want to do is is that you might just want to have the video they have ultimate bears from the author on Vimeo. So if you come here and look, we have a paragraph and they have multiple H tag references. So they’re not only referencing the video, they’re referencing the author and then they’re referencing the company as well. But we don’t really want that we want to be able to want to be able to promote these videos with potentially not having any extra clutter or having ways where the user can leave our website. Because the idea is once we get them there, we want to keep them occupied and have them learn as much about our company as possible. So we’re gonna come here, we’re going to delete that. 

And now we just have two videos. So it’s pretty simple on how you can embed for bed these videos. I do want to go through and just kind of highlight a couple of things is that when you come here and you click on Share, you have this little YouTube URL. This is going to be fairly important once we get into WordPress, a lot of our themes and the page builders we have already have YouTube and Vimeo elements built in and instead of copying and pasting them over, all you got to do is put copy and you copy this URL and you paste it right into that section. And it automatically uploads it for you. But knowing that you can pull the embedded video from YouTube is also pretty important. I still I use this about half the time. it just depends on what the web page I’m building and what the what you know, the web builder what theme who built the theme. So being able to have this as a really great option. 

Also to because you can do this same thing with here. so if you have this link, you’re gonna be able to copy and paste that into certain page building elements on WordPress, and you’re good to go. So with that being said, let’s move on to the next element.

PHP Code Snippets Powered By : XYZScripts.com