You should use Media Queries. Give that element a class & style it through media query following different screen sizes.
Here is the sample:
HTML
<div align="center">
<div class="resolution">
<div style="position: relative; padding-bottom: 50.00%; padding-top: 35px; height: 0; overflow: hidden;">
<iframe style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" src="https://wordpress.stackexchange.com/questions/352152/html-websiteaddress" width="640" height="360" allowfullscreen="allowfullscreen"></iframe></div>
</div>
</div>
CSS
For bigger screens (laptop/desktop) use different widths like:
@media screen and (max-width: 1280px) { <-- /* Whatever screen size you want to put here */
.resolution {
width: 75%;
height: 75%;
}
}
For smaller screens (mobile/tab) use different widths like:
@media only screen and (max-width: 640px) { <-- /* Whatever screen size you want to put here */
.resolution {
width: 100%;
height: 75%;
}
}
To understand Media Queries better Here are few references : Web Design Media Query & Media Rule