CSS iframe won't move - html

Question

I'm pretty new to HTML and CSS, and I've looked for an answer to this for awhile but I can't seem to find anything. I have an iframe element that I'm trying to position , but whenever I change the left or right properties it doesn't actually move.
.things1 {
position: relative;
}
.afx-vid {
position: absolute;
left: 500px;
}
<div class="things1">
<iframe class="afx-vid" width="300" height="200" src="https://www.youtube.com/embed/rndV_5q8Tkc" frameborder="0" allowfullscreen></iframe>
</div>
I know this probably seems like a dumb question but some help would be appreciated :)

Answer 1

You code will actually move the iframe, but this is not a good way to do that. I recommend you use flex property to move your elements on your website.
flex is super easy and it will make your learning so much easier.
There are tons of youtube videos and websites that explain how flex works, so please watch them, it will help you. :)
Here is your fixed solution. Just replace your current css with this one :
.things1 {
width : 100%;
display: flex;
justify-content: center;
}
.afx-vid {
margin : 0px auto;
}
You always assign display : flex; to the parent of the element(s) that you want to move (in this case, you want to move .afx-vid, and his parent is .things1, so we give .things1 display : flex;).
justify-content : center; is one of the properties you can use when you declare display : flex;. What it basically does is align items on x-axis (in this case, he will align your iframe to the center of the page).
Let me know if it worked. :)

Answer 2

This actually should be a comment, but I want to demonstrate what I write by using code, so here it is:
What do you mean when you write "whenever I change the left or right properties it doesn't actually move"?
I changed the left setting of your code in the the snippet below to 200px(it's the only change I made), and the position of the iFrame is different than in you original snippet! (it's 200px left of the parent's left border, opposed to 500px in your snippet).
???
.things1 {
position: relative;
}
.afx-vid {
position: absolute;
left: 200px;
}
<div class="things1">
<iframe class="afx-vid" width="300" height="200" src="https://www.youtube.com/embed/rndV_5q8Tkc" frameborder="0" allowfullscreen></iframe>
</div>

Answer 3

I had the same problem if I understand you correctly. I had an iFrame and I gave it a style by giving it the class-attribute and in the CSS for that class I tried to give it:
position: absolute;
left : 200px;
right : 0px;
top : 0px;
bottom : 0px;
But the left and right positions had no effect. The IFrame did not "move" to where I wanted it.
For every other type of element using CSS this way seems to work but there is something about iFrame that makes it different.
Then I finally discovered a somewhat round-about way to make it position like I wanted by doing the following:
In the HTML for the IFrame-element give it:
width="100%"
height="100%"
Note above is HTML, not CSS
In the HTML wrap the IFrame element inside a DIV and give that div a style-class named for example 'iFrameWrapper'. Give that wrapper-class the attributes like these:
.iFrameWrapper
{
position : absolute;
left : 210px;
right : 0px ;
top : 0px;
bottom : 0px;
}
Now the iFrameWrapper -DIV AND the IFrame -element inside inside it position correctly.
The HTML looks something like this:
<div class="iFrameWrapper">
<iFrame width = 100%;
height = 100%;
src = "..."
></iframe>
</div>
SUMMARY:
Make the iFrame element have HTML attribute-values height="100%" width="100%" and wrap it inside an absolutely positioned DIV. Then position that wrapper-div with CSS anyway you want.