You may want to embed YouTube videos or Google maps into your web page. This is fairly easy because most social sites have a share button that you can click to embed and then you just copy/paste the code. However, when you go to view your website on a mobile phone you'll see that the video stretches the width of your page because YouTube included a width property of 560pixels.
The first thing you need to do is remove the height and width properties that came with the copy/paste code. You'll then wrap your video in a div tag with a class name and define new properties. Read below for the details.
You can view a demo of a responsive YouTube video on our website. To view the code, right click on the top of the page (left a small margin at the top so that you'll have white spaced to click on.) and then select "view page source".
Please know that this is NOT an exact science! You will need to play around with the values to get your video to line up correctly. Your CSS properties and values will be greatly depend on surronding elements. It will also be depend on whether you want your video to take up the entire monitor (absolutely no other content on the page), the cover area or other items below the image. You may also need to adjust your CSS if you are using Bootstrap!
After you watch the video on how to write CSS for a full screen responsive video, please leave a comment (on YouTube) to indicate that you have completed this step. In the comments, write "I can create responsive video pages". But if you still don't understand something, please write that in your comments too.
Practice embedding YouTube videos and Google Maps using the skills you now know.