Mobile only

<!DOCTYPE html>
<html lang="en">
<head>
<title>Mobile only</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<style>

body {
  margin: 0;
}
.iframe_container {
  width: 800px;
  height: 450px;
  border: 5px solid red;
  margin: 20px auto;
}

iframe {
  width: 100%;
  height: 100%;
}

.desktop {
  display: none;
  color: white;
  font-size: 100px;
  text-align: center;
  font-family: arial black;
}

@media all and (min-width: 320px) and (max-width: 425px) {
  body {
    background-color: olive;
  }
  .iframe_container {
    width: 90%;
    height: 162px;
  }
}

@media all and (min-width: 320px) and (max-width: 823px) and (orientation: landscape) {
  body {
    background-color: black;
  }
  .iframe_container {
    border: 5px solid white;
  }
}

@media all and (min-width: 320px) and (max-width: 538px) and (orientation: landscape) {
  .iframe_container {
    width: 90%;
    height: 272px;
  }
}

@media all and (min-width: 539px) and (max-width: 568px) and (orientation: landscape) {
  .iframe_container {
    width: 90%;
    height: 272px;
  }
}

@media all and (min-width: 569px) and (max-width: 640px) and (orientation: landscape) {
  .iframe_container {
    width: 90%;
    height: 287px;
  }
}

@media all and (min-width: 641px) and (max-width: 667px) and (orientation: landscape) {
  .iframe_container {
    width: 90%;
    height: 337px;
  }
}

@media all and (min-width: 668px) and (max-width: 823px) and (orientation: landscape) {
  .iframe_container {
    width: 90%;
    height: 416px;
  }
}

@media all and (min-width: 824px) {
  body {
    background-color: red;
  }
  .iframe_container {
    display: none;
  }
  .desktop {
    display: block;
  }
}


</style>
</head>
<body>

<div class='iframe_container'>
  <iframe src="https://www.youtube.com/embed/Jn8v3AfyrX0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

<h1 class='desktop'>MOBILE <br /> ONLY</h1>


</body>
</html>