Position a div containing iframe on right-hand side of screen? - html

Question

I've succeeded in doing this a dozen different ways on desktop, but nothing seems to work on a mobile phone.
I've tried:
- relative positions, absolute positions
- float
- various combinations of widths, margins and paddings
- I even tried using a 1x2 table, where the first cell used width to push the 2nd cell over to the right
Can it even be done? Surely I've seen it done?
How do you position a div containing iframe on right-hand side of screen?

Answer 1

You might try putting a wrapper around the iframe, then positioning the wrapper.
css
body {
position: relative;
width: 100%;}
.wrapper {
position: absolute;
right: 0;}
html
<div class="wrapper">
<iframe src="https://www.w3schools.com">
</iframe>
</div>
Without seeing the complete html/css of both the page and the iframe, that's the best recommendation I have. The iframe itself can (and likely does) have it's own CSS, so keep that in mind too.
Here is a working example https://www.w3schools.com/code/tryit.asp?filename=G86JSY65NPG2
The iframe contents didn't load properly on my mobile, but the iframe box is still there and positioned on the right.

Answer 2

OK, I finally managed something like it using tables.
Not only got on the right hand side, but also bottom right, which was a further goal.
<table id="table"><tr>
<td id="cell1"> </td>
<td id="cell2">
<div id="video">
<iframe src="https://www.youtube.com/embed/.......></iframe>
</div>
</td>
</tr></table>
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
}
#table {
height:100%;
width:100%;
}
#cell1 {
width:100%;
}
#video {
position: absolute;
width: 50vmax;
height: 50vmax;
right: -25vmax;
padding-bottom: 20vmax;
}
#video iframe {
border: 0px;
padding-bottom: 20vmax;
padding-top: 0vmax;
width: 20vmax;
height: 20vmax;
}