Question 255882 in CSS Question posted in
Some basic documentation can be found here.

Css – How do I create a page that is responsive based on height not width?

I am trying to create a very simple page for a game that I will embed using an iframe.

I want the responsiveness to function exactly the same as this page: https://rajeevbasu.com/projects/wil3d/index.html

In this above example, the game and text resize perfectly to always fit the height of your screen, and when the window gets really small, it just shows the game (which makes sense)

Can anyone help me understand how to make something very similar to the above example link?
My game will be embedded using an iframe and is 3:4 in size.

I’ve found lots of examples which show how to do width, but none that focus on height.

I’ve been playing around with this example, but no luck so far:
https://jsfiddle.net/mjgLcp9q/

<div class="responsive-video">
<div class="cta"></div>div>
<iframe width="420" height="315" src="https://www.youtube.com/embed/j1qtsLfZWWQ" frameborder="0" allowfullscreen></iframe>
</div>

.responsive-video {
    position: relative;
    padding-bottom: 56.25%; /*Set based on the videos aspect ratio. If the aspect ratio is 16:9 set 
    the padding bottom to 56.25%. If the video aspect ration is 4:3, set padding-bottom to 75% */
    padding-top: 35px; /*Height of the youtube video header*/
    height: 0; /* Not needed as the iframe derives the height from the padding bottom */
    overflow: hidden; /*hides if any of the video escapes outside the container*/
}
.cta  {
    position: absolute;
    width: 30px;
    height: auto;
    right: 0;
    bottom: 0;
}

.responsive-video iframe {
    width: 100%; /*make sure video takes up 100% of the width*/
    height: 100%;/*make sure video takes up 100% of the height*/
    position: absolute; /*required because container has a height of 0*/
    left: 0; /* correct the positioning */
    top: 0; /* correct the positioning */
}
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    the solution above worked. in order for things to scale according to heightl this is how i updated this section of code, so the game is framed correctly (no black borders)

    .iframe-container {
    /* Define your desired aspect ratio here (e.g., 16:9) */
    aspect-ratio: 3 / 4;
    height: 80%;
}

    the code may be a bit janky, but it is working for test purposes. thank you!


  2. 0

    Quick write up, I imagine there may be mistakes but this demonstrates how media-query can be valuable but not necessarily needed in your case for all aspects. It’s powerful in cases you want to take things from desktop viewing to mobile viewing and want to adjust sizing and all sorts.

    Below is the example.

    body {
    margin: 0;
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

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

#text {
    text-align: center;
    padding: 20px;
}

/* Media query for smaller screens */
@media screen and (max-width: 600px) {
    #text {
        display: none; /* Hide the text on screens below 600px width */
    }
}
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Iframe with Text</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <iframe src="https://www.example.com"></iframe>
    <div id="text">
        <p>Hello, world!</p>
    </div>
</body>
</html>

    For the example to run properly, you may need to zoom-in to the browser or change the window size manually to make window think it’s 600px or below.

    body {
    margin: 0;
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

.iframe-container {
    /* Define your desired aspect ratio here (e.g., 16:9) */
    aspect-ratio: 16 / 9;
    width: 80%; /* Adjust the width as needed */
}

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

#text {
    text-align: center;
    padding: 20px;
}

/* Media query for smaller screens */
@media screen and (max-width: 600px) {
    #text {
        display: none; /* Hide the text on screens below 600px width */
    }
}
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Iframe with Text</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="iframe-container">
        <iframe src="https://www.example.com"></iframe>
    </div>
    <div id="text">
        <p>Hello, world!</p>
    </div>
</body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search