0
130
ViewsHow to Hide Iframe if web browser size is reduced or in windowed mode
I'm trying to make an Iframe hidden if the screen size is smaller than the width of the IFrame. Right now if I'm using a small laptop the side of the website has a white line (see pic below) and I would just like to hide the Iframe if the screen size or web browser is too small.
Here is my code, it seems to work with mobile devices, but when I resize my web browser it doesn't hide.
<iframe embed class="v-tour-object" style=position:absolute;left:700px;top:0px; width="550" height="360"
src="https://www.youtube.com/embed/tgbNymZ7vqY">
</iframe>
<script>
if(window.innerWidth <= 1000 && window.innerHeight <= 800) {
document.querySelector('.v-tour-object').style.display = "none"
}
</script>
·
Juan Pablo Isaza
1 answers
Answer question0
You should handle window resize event
OR
Css Media Query
window.addEventListener("resize", () => {
const h = window.innerHeight;
if (h < 920) document.querySelector(".v-tour-object").style.display = "none";
});
Css
@media only screen and (max-height: 920px) {
.v-tour-object {
didplay: none;
}
}
·
Juan Pablo Isaza
Report
Answer question