Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!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>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement