2 MIN TUTORIAL - Responsive Videos - SIMPLE EASY
RESPONSIVE VIDEOS - RESPONSIVE WEB DESIGN - HTML5 css3
Please have a look at my webpage where you can find extra information
http://tomtomheylen.com/categories/Re...
Exercise file
http://tomtomheylen.com/download_file...
PREVIOUS VIDEO – responsive web design basics
• 5 MIN TUTORIAL - Responsive Web Design - S...
FINAL VIDEO – responsive images, videos, menus, backgrounds and hiding elements
• 7 MIN TUTORIAL - Responsive Web Design par...
In this very short video you will learn how to make a responsive video.
You can find a link to the exercise file below.
http://tomtomheylen.com/download_file...
You might aswell watch video one first, where we explained the basics of responsive design.
• 5 MIN TUTORIAL - Responsive Web Design - S...
We start with a head, a menu, a content body and a footer. We have applied the basics of responsive design as seen in the first video.
For this example we will use a Youtube video.
Go to the video you like on Youtube, copy the embedded code and past it into your content "body".
We place a div container around this video and give it a class name.
Next we will remove the width and height from the iframe.
In our css we apply some styling to the video class.
Position relative, width, height 0 pixels and padding-bottom 57% this to maintain the aspect ratio of the video.
We set the iframe to position absolute, left and top 0 pixels and width and heigt 100%. I have set the background-color to black so you'll be able te see the iframe when not displayed from a server.
This is all there is to do to make responsive videos.
As a result you have a video that looks good on any device.
Maybe you want to watch the final video where we pud together a whole responsive webpage with responsive navigation menus, responsive images, responsive backgrounds and hiding elements.
• 7 MIN TUTORIAL - Responsive Web Design par...
Did you like this video?
Please subscribe and share.
http://www.youtube.com/subscribe_widg...