Insert Camtasia Video into Website

Показать описание

Hi and welcome to this tutorial. Today I will show you how to embed Camtasia video inside the website. And the I'm using the free start bootstrap template for this purpose.

Want to learn how to create awesome videos with Camtasia Studio 9?
Then check out this tutorial and use the link below to get your 90% discount!

► Get Filip a coffee so he can work longer at night :)

► LET'S CONNECT:

Our video will be responsive on mobile phones and tablets so let's start. First of all, let's download some free templates I use start bootstrap for this purpose. Go scroll down over here. Ok, let's say these two columns portfolio template. Just click download and download it for example on your desktop. Ok, now we are on our desktop so let's just click on this zip and drag it outside. Now we can delete this zip file and we have our site. So let's preview it. If I open it up. Ok, we now have our template ready for implementation of our video. So let's implement video. Let's make some short video and export it and the embedded on on this first project named project one. Open Camtasia, go over, here import media and I will import this squirrel and I will import also some music ok. Just drag and drop it nicely. And drag and drop this music few adjustments ok. And let's cut it over here go to produce and share. And the in this drop-down menu you can choose this with the smart player. I will choose this HD resolution mp4 with the smart player up to 1080. Ok nice next. And I will export to my desktop to organize produced files into subfolders. Click this because we will use this folder to import it very quickly and if you don't click this your desktop will be swarmed with files and folders. Be sure to click this to save yourself a time of cleaning up. Click finish. Ok, I will now just fast forward this. Nice, our video is exported. So you can just close your Camtasia on the desktop we can see our folder called untitled. This is where we export our files you can see that we have a bunch of files, the most important thing is that this is our video called untitled mp4. I will now open my favorite code editor. It's called brackets it is a free and open source editor I recommend it all the time. Click file click open folder and we are going to open our bootstrap folder on our desktop you can see this click select folder and we have our files over here ok. If I click index HTML we now have our site so let's jack our site. This is called project 1 so this is something over here in a project section navigation and this is this is our image. I will just do this so you can see better. The goal is to replace this image tag with our video so we don't see the image but video. To do that go to your desktop and you can see that in this untitled folder, our video folder we have this two HTML documents. So just open this untitled HTML and you can see that we now have our video. So let's open that file in brackets. Just go file go open go to your desktop go to your untitled and go to your untitled HTML and click open. The most important thing about this is to locate your iframe this is iframe so just take this iframe take this iframe and replace our image tag with this iframe. This is nice. Let's save it and let's check it out. Ok, and we don't see anything. Why? Because we didn't put some folders inside our project so to make this happen to use this untitled just cut it and put it inside our bootstrap folder. Now we have this and untitled folder. Let's check it out .Oh my god it doesn't work again so what you going to do. We need to change the paths. Keep changes in the editor, ok, keep the changes in the editor. This is nice. I will remove this untitled since this is not important anymore. So we need just to embed this player. Untitled HTML since this is the untitled folder. Let's check it out now. It's still buggy what is wrong with this? Ok, I just misspell this ok don't flame me I'm just fine. Ok, we have our video, but our video is super small and pretty ugly on a site. So we need to add some responsivity to our site to fill the whole box. Get to bootstrap.Com and on this site go to components and you will see on the right side go to responsive embed and since our video is HD 16:9 aspect ratio, just copy this div, copy just this division, go to your bootstrap project website project and paste it somewhere over here. Let me just. Ok. Nice. So you can see that we now have this iframe. Most important thing is that we now copy this source all the way to the end, just cut it and replace it over here you can delete this old ifram.E ok this is nice let's check it out.