 In this video, I'm going to show you how you can embed a video from a website directly into Ecamm Live using web widgets. Now, this is something that people often want to do. They want to share a YouTube video, perhaps, where they want to commentate on it, or give a reaction to it, or whatever the case may be. Lots of reasons why you may want to bring a video from the internet directly into Ecamm Live to talk about it. And the way that people would tend to think to do this is to use screen sharing. So they'll screen share their portion of the screen where the video is playing, or they'll share the browser window, for example, where it's playing in YouTube, for example, and then just crop into the video part. There's a couple of issues with this, though. First of all, it means that you do have to have the video queued up and ready to go in your browser for when you are ready to go live, or do your recording, or whatever it happens to be. The second point is you do then need to have that sort of screen real estate, as it were. I hate that term, but there you go. I've used it. Taken up by the browser window. So there's got to be space on your screen to actually have the video open for you to be able to then play it. And then again, you need to actually go and click on the play button, or however you want to do that in the browser to get it actually playing. So there is a better way in my view to do this if you want to do a little bit of forward planning and actually have it embedded in your Ecamm Live production. And that is what I'm going to show you today. Incidentally, this question came up in the Ecamm Live Facebook group. Somebody asked in there how they would go about doing this if there was even a way to do it. And so that's why I'm making this video. And so if you are an Ecamm Live user at whatever level, if you are not a member of the Ecamm Live Facebook group, then you're definitely missing out. In my mind, it is arguably the best feature of Ecamm Live, is the welcoming and supportive community over at facebook.com. slash groups slash Ecamm Live. I'll leave a link in the description. And yeah, any questions you've got, just go and ask them in there. I've asked plenty of questions in there. Myself has been a vital part of my sort of development and learning Ecamm Live. So once again, if you're not already a member, definitely head over to that Facebook group. So with that said, let's look at how we're going to do this. Now I've got a video queued up ready to use. And it happens to be this video I did just a few days ago about actually easily embedding videos in your website using TubeBuddy. Now this is going the other way. This isn't what we need to do today, but I thought it seemed like an appropriate video because it does give you a really quick and easy way to get the embed code exactly as we want it, or almost exactly as we want it. It's got a little piece of code that we need in there. First of all though, I should just say you don't need TubeBuddy to get the embed code. What you can do is just come down to any particular video that you want to share and do make sure you have permission to share it. And there's no issue or copyright things going on with you actually using the video in your video. I think I'm safe with sharing my own video. I've given myself permission. Generally videos on YouTube will be sort of creative comments, commons rather, not comments, creative commons, and you will be able to share them. And in fact, I think if you are not able to, then you simply won't be able to get the embed code. But don't take my word for that. Do make sure that you are allowed to use any footage that you are using in your own videos. But down here on YouTube, so you don't need to be logged in or anything like this, it's just a case of into your own account. I mean you could be using anybody's video. You can see here where it says share and click on share and it will give you the code if you want to share that video. Now it's going to start with a link. So this is basically just a link for the video if you want to share it with somebody. But you do also have this option here which says embed. Now if you click on this embed link, what that's going to do is give you this section of code. And this is if you are going to embed this into your website. And it's structured in such a way as an iFrame. So without needing to go into technical details, this is basically a virtual frame on the website where the video is going to stay. But don't let's get bogged down in that because we don't need to get into coding and stuff like that. All I'm going to do is just for now I'm going to copy this code. What we want to do though is we want to actually have this video play automatically when we load it up. So I am going to go into the TubeBuddy section at the moment to just actually make sure that it has set to auto play because we need to do a little bit of a change to this code. And if I use the TubeBuddy version, I'll be able to show you the code that you need to put in. So what I'm going to do is I'm going to actually come into my YouTube studio here. Just bear with me because you'll understand why I'm doing this in a moment because I'll show you the two pieces of code together. So let me just go through and actually find that exact video within my YouTube studio. So it is one of them up here. Easy embed. Oh, there it is. So within TubeBuddy, what we can do is I can click on the video. So that is the video in question here, this easy embed video. And there's a little tool here for TubeBuddy. Click on this one and then you've got this one, advanced embed. All I'm going to do in here is I just want to make sure that this auto play is set to auto play. So it's giving me the embed code down here, which will be pretty similar to the embed code that we get directly out of YouTube. I just want to make sure that we've got auto play selected. And now if I copy that, you'll notice that it has actually added in this little bit of code here. Auto play equals 1 and that's the bit of code that I want you to just take note of. So I'm going to copy this and I'll explain how later. I'm going to copy this and then what I'm going to do is I'm going to come over to my notes. And in fact, at this point, what I'm going to do is I'm going to come into live demo mode so that we can see how to do this. So I'll just come back to this view and then I'm in live demo mode now. So what you can see here is we've got these two pieces of embed code. Now, the question in the Ecom live group was specifically about how to take an embedded video from a website and it was a news website as opposed to from YouTube. I'm doing this video about YouTube because this is a common question that people have or common need that people have. So that's why I'm using this. The process should be the same, although I'm not sure what the news website was. So the actual code that you use may be slightly different. But this is the one that we just took straight from YouTube. And this one down here is the one that we took from TubeBuddy. Now, the one from TubeBuddy basically is a smaller piece of code because it doesn't have all the same parameters and things like that because we only clicked one. The one that we clicked was for autoplay. Now, what we need to do is it's basically this bit. So this piece of code here is the exact piece that we need to actually embed this as a widget in our Ecom live. This is the format of them. So you'll find that whatever site you're looking at, be it from YouTube, from Vimeo or something like that, they will put this bit of code here related to the frame and things like that. They'll also add in all these other things. So here it's got YouTube video player. It's got the iframe border. So that's all related to the way it's presented on screen. You've got all these other different things. So allowing autoplay, clipboard, encrypted media, gyroscope, picture-in-picture. You don't need to worry about any of all of this. All we're interested in is this, which is the actual URL of the embedded video. So let's just extract that part now. And I'll just put this up here, like that. And we can actually just get rid of all of this. But as mentioned that we did want to autoplay. Now what you'll notice here is here with this iframe format, it has actually got the autoplay listed amongst a load of other things. But we don't want to have that because we want to actually just incorporate it directly into this URL. You'll notice from the TubeBuddy version though, if I come to the TubeBuddy version, it has actually got the autoplay section is part of the URL itself. So that is the difference that we get when we use the TubeBuddy. You won't need to use TubeBuddy necessarily because all you'll need to know is that you just need to add this little bit of code onto the end. So once you've got the embed URL from YouTube, all you'll need to do is add on this question mark, autoplay equals 1. That is the one that we're going to use. And that's going to mean that basically because you're not going to have any player controls as such in your e-cam live, it's just going to play the video. This is just going to trigger it to autoplay. Otherwise you wouldn't be able to physically start and stop it from within e-cam live. Once again, the actual code for autoplay may be different from platform to platform. So I don't know exactly the new site that was in question in the e-cam live group. But this is how we'll do it with YouTube. So now I'm just going to click on Copy. What I'm going to do is I'm going to come to a different scene over here, which is basically exactly the same as this one. But it's just a different scene to work with. And then what we're going to do is we're going to come down here to where it says Widget Overlays. If I hover over it, it's this one here with a little picture of the globe just down there. Click on the plus here. And then I'm going to highlight the text. I'm going to copy that, and I'm going to just paste it in here. Here's one I did earlier. Paste it in there like that. And then I'm going to call this one demo video. Why not? And then I'm going to click on Add Widget Overlay. Now that's adding it in. And you can see it's already actually starting to play. So if I just make this a little bit smaller like this perhaps. In this video, I'm going to be talking about the TubeBuddy Advanced Embed Tool so that you can understand how it makes embedding your YouTube videos a piece of. So there, that is now embedded into that scene. Now it will auto play. So if I come back to that scene, and it's going to start playing again. In this video, I'm going to be talking about the TubeBuddy Advanced Embed Tool so that you can understand how it makes embedding your YouTube videos a piece of cake. If I just hide my interface for one second. If you have ever tried to embed a video either on your website, on a blog or something like that. You'll know that it can be quite tricky to find the exact bit of code that you need to make it look the way you want it to because there are lots of different things that we can change. For example, you know, do you want it to auto play? Do you want it to loop? Do you want the controls to be displayed on screen? All these sorts of different parameters. And they've all got some extra little bit of, that was a bit meta, wasn't it? Me playing a video of me playing a video. But anyway, so that is how you would do it. So now you can see that as I go to that particular video at that particular scene. In this video, I'm going to be talking about the TubeBuddy Advanced Embed Tool. As I say, you don't actually get the, you do see the player controls on there. In this video, I'm going to be talking about the TubeBuddy Advanced Embed Tool so that you can understand how it makes embedding your YouTube videos a piece. But we don't actually have the ability to control it. So although you will see those controls over it within Ecamm Live, we don't have the ability to actually go in and control those things on the screen. But if you want to just basically share a video and have it play. So maybe you want to have it play in the background. You can have it on the scene by scene basis. So you can just drop it into a scene. Or obviously the other way to do it is you can just actually show and hide the overlay. So if I come back into demo mode, I go into this scene here. In this video, I'm going to be talking about hide the overlay. It will just disappear just like that. So if I come back to my other scene, come out of demo mode rather. And now I just show that video as an overlay. In this video, I'm going to be talking about the TubeBuddy Advanced Embed Tool. So I hope that helps. That is a quick and easy way to actually just embed a video into directly into Ecamm Live if that's something that you want to do. I'll leave a link to the code that you need to add in. So basically if you're embedding a YouTube video, you're just going to extract that YouTube embed link. And just to really reiterate that one more time. It is this one that looks like this. YouTube.com slash embed and then your video code. And then if you want it to autoplay, which you will do if you want it to just play automatically. Then you just need to add this question mark autoplay equals one at the end of it. And that is how you do that. Now I'll leave a link actually directly to that other video that I did all about embedding code from TubeBuddy. Because you really got a lot more control over what you actually include when you are embedding videos the other way into your website. So that video is going to be coming up next. And I'll see you over there.