Videos need to be closely aligned with SVGs; in this video, see how to add a feature of SVGs called foreignobject to inject your Android phones with different videos.
- [Instructor] So there's a few ways…that you could add videos,…but to keep everything aligned and responsive,…it's better to just add them to our SVG files.…Now, we're going to need to use the special features…of SVG's, called foreign object,…which allows us to place…any type of object we want inside an SVG.…Now, all of our videos are in this videos folder,…and you can see all their names are right here.…So, what we're going to do is scroll down…to our first video location,…which will be this section right here.…
And this is where we create a profile for our pets.…So, here we have the SVG that uses the link…to get to the Android phone, and so what I want to do now…is create another group.…This is how you do a group in SVG.…You just use the little g tag.…And let's go ahead and close that one out.…Inside this g, I'm going to give this a class of video.…And then, in here I'm going to use…a special tag called foreignObject.…
And, I'm going to need to give it…the offset that each video needs…to go from the x position.…
- Organizing your CSS into partials
- Creating variables
- Using custom selectors
- Working with flexbox layouts
- Setting up a mobile layout
- Making your features responsive
- Alternating layouts
- Adding animation
- Adding videos
Skill Level Advanced
Design the Web: Responsive SVG Imageswith Chris Converse22m 46s Beginner
Building Responsive Forms with Flexboxwith James Williamson1h 19m Intermediate
1. Getting Started
2. Headers and Footers
3. Featured Content
Next steps1m 6s
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.