Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
So now that we had been through the whole process of building our embed code and we understand what each piece does, I want to show you a handy tool I created to help with the embed code process. If you go to videojs.com/embed-builder, I have a tool where you can just plug in the values into the fields and it will automatically generate the embed code for you. So I am going to go ahead and plug in the same values we were using through the examples. So the Poster Image, it's on the explorecalifornia website, in video assets folder, jpg, and then I am just going to copy that and use that for my MP4 source, which is in the same folder under podcast .mp4, and I am going to do the same for our WebM file and the same for our ogv file.
Under the last one you can see is our Flash Source, but it also has this Use MP4 and we can't change this right now without turning off the Use MP4. What this does is it tells Flash to use the same file that we're using for MP4 source. But if you wanted to provide a specific source for Flash you can do that as well. Then on the right we can change some attributes and I'll change our Width to 480 and Height to 300, which is the size of our movie. We have other options that we can turn off, the Download Links, turn off support for VideoJS, preload the video, autoplay. If we scroll down, we can see the embed code. It already looks pretty big, so I am going to use the Compact Version which turns off all the comments.
But from there we can just go ahead and copy all of this and go over to the code and just paste over what we've already done, the stuff that we just created with the Embed Builder. I'll save that and go over to Firefox and reload our page, and you can see? (Music playing) It works the same way that everything else worked. You can see the difference, that now it has the support for VideoJS link, which you can remove, but it just kind of shows you that the change has been made and now it works the same way that the other stuff did.
And so hopefully you don't feel too duped that this has been here all along or we've been going through the other videos. It is important to understand what all the pieces do in case you run into any issues or you need to make a specific modification. But now you can use the Embed Builder to get started quickly.
Get unlimited access to all courses for just $25/month.Become a member
93 Video lessons · 34003 Viewers
135 Video lessons · 68185 Viewers
79 Video lessons · 24037 Viewers
350 Video lessons · 108251 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.