Iframe doesn't respond correctly to width-CodePudding

I didn't have the best title here but here we go. So i am making a music website and i am trying to embed another page in my website into this website but i have nav bar.

I tried adding a bunch of different things in the css to make it not be so broken, if anyone has a fix or any way to make my question actually make sense feel free to edit or use the answer button. Thank you.

Sorry if it is confusing but, here is my code:

body {
  margin: 0;
  padding: 0;
  background-color: #181414;
  color: white;
}

.embed {
  margin-left: 25%;
  border: 0px #ffffff none;
  height: 100%;
  width: 100%;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 25%;
  background-color: #3f3c3c;
  color: white;
  position: fixed;
  height: 100%;
  overflow: auto;
}

li a {
  display: block;
  color: white;
  padding: 8px 16px;
  text-decoration: none;
}

li a.active {
  background-color: #04AA6D;
  color: white;
}

li a:hover:not(.active) {
  background-color: #181414;
  color: white;
}

<ul>
  <li>
    <div  onclick="location.href = 'https://www.ltunes.gq/'" ;><img src="https://ltunes.gq/assets/Logo.png" width="50" height="50">LTunes</div>
  </li>
  <li><a href="/">Home</a></li>
  <li><a href="music">Music</a></li>
  <li><a  href="radio">Radio</a></li>
  <li><a href="podcasts">Podcasts</a></li>
  <li><a href="lyrics">Lyric Search</a></li>
  <li><a href="jukebox">Jukebox</a></li>
  <li><a href="download">Download App</a></li>
</ul>
<div >
  <iframe  src="https://ltunes.gq/radio" name="Music" scrolling="yes" frameborder="1" marginheight="0px" marginwidth="0px" height="100%" width="100%" allowfullscreen></iframe>
</div>


<script async src="https://arc.io/widget.min.js#eMnAzx6E"></script>
<link href="https://fonts.googleapis.com/css?family=PT Sans" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=PT Sans:700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=PT Sans:400" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.12/css/all.css" integrity="sha384-G0fIWCsCzJIMAVNQPfjH08cyYaUtMwjJwqiRKxxE/rx96Uroj1BtIQ6MLJuheaO9" crossorigin="anonymous">

CodePudding user response：

Onced faced the same issue, styled the iframe like so:

iframe {
  height: calc(91vh - 90px), // 90px - height of the containing app header
  marginTop: 90px, // 90px - height of the containing app header
  overflow: hidden,
  width: 100%,
}

Don't know if it would work but might worth giving it a shot

CodePudding user response：

Here is what i used to make it work:

     iframe {
  height: 100vh;  
  marginTop: 90px;
  overflow: hidden;
  width: 75%;
  margin-left:25%;
  border:0px #ffffff none; 
}