HTML embed issue-CodePudding

I'm making a website for games, and when I try a link on mobile. the embed goes out of the frame. I want the embed to be accurate and USABLE to device width and height. On pc its fine because I have a specific px size, but on mobile, it goes off screen. Heres my code:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Comfortaa&display=swap" rel="stylesheet">
  <title>Alphatron Games - Sans</title>
</head>
<body>
<center>
<div>
  <br>
  <embed src="https://sans-fight-battle-sim.okechukwuwu.repl.co" height="680" width="1000">
  </center>

   
</div>
</body>
</html>

for example if i go on the website on mobile, it goes on mobile mode but the embed goes of screen.

Cant make the px size of embed smaller then it will too small on desktop. If i do device-width then it will break on some devices.

CodePudding user response：

In addition to setting its width, set its max-width to 100%, so on mobile the embed width will shrink to the width of the screen.

embed{
  max-width: 100%;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Comfortaa&display=swap" rel="stylesheet">
  <title>Alphatron Games - Sans</title>
</head>

<body>
  <center>
    <div>
      <br>
      <embed src="https://sans-fight-battle-sim.okechukwuwu.repl.co" height="680" width="1000">
  </center>


  </div>
</body>

</html>