Check out a free preview of the full Website Embeds & GitHub Pages course
The "Additional Embed Types" Lesson is part of the full, Website Embeds & GitHub Pages course featured in this preview video. Here's what you'd learn in this lesson:
Jen discusses ways videos and other media can be added to a page using embed codes from an external host.
Transcript from the "Additional Embed Types" Lesson
[00:00:00]
>> Jen Kramer: Okay, so a lot of you have been asking me about how do you put a video? How do you put out audio? How do I put my Twitter feed, my Facebook feed? You're gotta to use this exact same technique. I don't have time to go through all those websites, but that is what you are looking for.
[00:00:14]
You're looking for the button for like sharing this on somewhere else and then you wanna look for a link that's something like embed. So you can embed YouTube videos, Vimeo videos, Facebook, Twitter feeds, Instagram feeds, pretty much anything kind of along those lines. Social media is really, really big on sharing stuff and you can just go online and just grab that code and and put it into your web page.
[00:00:41]
Those of you who have your own videos. So I went ahead and I shot this video with my with my phone, I'd like to share it online. The best way to do that is to share that video on YouTube or Vimeo. Go ahead and put it up there and then embed that code from either YouTube or video onto your web page.
[00:01:06]
You can technically speaking put the video on your own website and people have to go there to see it and play it, but there's some big disadvantages to doing that and the big ones are your web hosting is gonna come with something called a data limit. It's how much data can go out over your website.
[00:01:26]
If you put your own video up on your own web hosting, every time somebody plays that video, there goes another many megabytes of data off your hosting plan. And eventually your hosting plan costs a lot of money or your website's gonna go down, cuz you've run out of data.
[00:01:43]
There's just a lot of reasons not to do that. So I strongly recommend putting up all your videos up on YouTube. You can always set them to be unlisted, so no one else can see them and then embed them on your web page. It saves you a lot of time and you let YouTube pay the bills for all the data instead of you.
[00:02:02]
They have lots of money. Let them pay the bill.
>> Jen Kramer: Okay, any questions on the rest of that?
>> Speaker 2: So when you do that and someone clicks the video on your website.
>> Jen Kramer: Yeah.
>> Speaker 2: Do they go to YouTube or they can just watch it on the website?
[00:02:18]
>> Jen Kramer: They watch it just on your website right here, just the same way we can see the map right here. You'll be able to watch the YouTube video right here. If you have an audio file, SoundCloud is really popular for sharing audio files. Other people will take their audio file and add some pictures with it, and turn it into a video.
[00:02:35]
That's another way to do it.
>> Speaker 2: And you can customize the media blue.
>> Jen Kramer: Yes, there's usually minimal customization. You can turn things on and off whatever you wanna do. Yep, so as I said, there were the web fonts readings here on the web page. I talked to you about how to embed maps right here.
[00:02:53]
There you go.
>> Jen Kramer: The rest of the information here that's on the forms page, there's some references you can take a look at. And then as I said last night, you can plan your portfolio. [COUGH] There's some additional CSS practice if you wanna go through and take a look at some practice with forms and then you can continue styling your about page or hobby page.
[00:03:18]
Creating a contact form for your website, include a map of your location somewhere on your contact page if you want to. And remember that if you don't wanna include your exact address, you can always just include a map of your city or a map of your country. That's okay, too.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops