27. Working with CSS iframes - Full stack web development Tutorial Course

In this FullStackWebDevelopment tutorial video, We are going to #learn about #iframes using custom #css for the new website.

We are going to build the second column on our web page and put a youtube video in it. The iframe tag specifies an inline frame. An inline frame is used to embed another document within the current HTML document. Here we are going to use the iframe to add an HTML snippet for the youtube video.

After adding the video in the second column container we make our website mobile compatible. To make sure the items inside the column are placed at the proper distance to each other we apply a margin to the div inside which headers and forms are contained not the entire column div, along with some margin-left to the div tag of the second column.

To make the website mobile compatible we override the column style to apply a new style when we are on mobile. We override the width and margin properties of both the column containers by applying a width: 100%; so that it occupies the entire screen space and margin:0; to remove any default margin styling of the browser. We also resize the length of the input text area of username and password and apply rounded corners to them.

To resize the video to mobile view we apply styling to the div container inside which the iframe is placed. We set its position: relative; The element is positioned relative to its normal position and width: 100%; While applying the styling property we should be very very specific about the part of the website we want to style.

----------------------------

Week 1: Day 5
Section 4: Advanced CSS: Building and styling website
Tutorial 27: Working with iframes

----------------------------
Do subscribe and hit Bell Icon
----------------------------

Follow us in social media handles for opportunities and code related support.

----------------------------

Got a question on the topic? Please share it in the comment section below and our experts will answer it for you.

[MrKillakiddx]

Just a heads up- At the very end of your video when you added the iframe, if you're using a newer version of brackets you must separate .videoContainer with a comma before plugging in iframe. So it will look like this: .videoContainer, iframe {}

[oridavid]

finally a friendly intro music. Thanks!!

[georgezorbas]

Nice video. I would like to know if overflow is NOT hidden, what would that cause. I would like to see it and understand..

[raymartpamplona]

for those having problems like not left align properly, make sure that your custom styles comes first before the media query, you know top to bottom

[badbwoy]

Question, why did you use a margin instead of padding when trying to move the contents in the columns?

[raresvlad]

Hi there,

Everything was going fine, then all of a sudden, the drop-down menu in mobile mode isn’t working anymore.
I tried to erase everything to the point it was when it was still working but nothing changes, still not working.
Would somebody be able to help me?

[shannawielinga]

Hi Jason, very cool stuff, thank you so much. At 08:30, when you add some code to make the website mobile compatible, there is no responsiveness anymore. Either, with the .code-6 {width: 100%; margin: 0}, all columns become rows OR without the code, the website is not responsive. I have checked the video and also the one before three times now and can't figure it out. This is the code that I am using:

Mobile

@media screen and (max-width: 680px) {
ul.topnav li:not(:nth-child(1)) {
display: none;
}
}

ul.topnav li.dropdownIcon {
display: block;
float: right;
}

ul.topnav.responsive li.dropdownIcon{
position: absolute;
top: 0;
right: 0;
}

ul.topnav.responsive {
position: relative;
}

ul.topnav.responsive li {
display: inline;
float: none;
}

ul.topnav.responsive li a {
display: block;
text-align: left;
}

.col-6 {
width: 100%;
margin: 0;

[pratikpanwar]

i did everything correctly but still i frame video is not coming in center in mobile view?
can you help please?

[ujwalkachade]

i did everything same but my video is not coming in side it always coming at bottom of the form

[JAYPATEL-kmnf]

any one is having a code of anyone share with me?

[soubhikghosh]

even after giving width 100% a new row isnt frmed wat to do