Campsite Coders

Learn CSS

Learn to code and become a Front End Web Developer

Campsite Coders Bootcamp Coding Advenuture

How to Style Iframes with CSS

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.

How To Wrap Iframe in a Container

HTML

html code example of images in the aside element

CSS

css code for selecting nested elements

RESULTS

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".

NOTES

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!

How To Create a Responsive Video

NOTES

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.

Campsite Coders Bootcamp Coding Adventure
Road Map for Coding Adventure One

Campsite Coders

56747 Ewing Rd

Moffat, CO 81143

720-515-1124

Campsite Coders logo in footer

Copyright 2023 . All rights reserved