CODEWITHSUNDEEP
htmliframe
passegua
passegua

Reputation: 61

Iframe not showing correctly, black frame too big

I am embedding this:

<iframe src='https://www.embed.com/app/math-game/' style='width: 800px; height: 600px;' scrolling='no' frameBorder='0'></iframe>

but I see a small game with a huge black frame, how could I embed just the game without that black frame?

Here is the page:

https://www.sinapsi.org/wordpress/gioco/

Thanks.

Upvotes: 0

Views: 971

Answers (3)

Mehdi Jomaa
Mehdi Jomaa

Reputation: 86

If you don't want to use an external stylesheet, you can use this code

<div style="width:600px;height:450px;overflow:hidden;">
  <iframe src='https://www.embed.com/app/math-game/' style="width:961px;height:700px;margin:0px 0px 0px -185px;"></iframe>
</div>

Upvotes: 0

Mehdi Jomaa
Mehdi Jomaa

Reputation: 86

.container {
  width: 600px;
  height: 450px;
  overflow: hidden;
}

.container iframe {
  width: 950px;
  height: 700px;
  margin: 0px 0px 0px -175px;
}
<div class="container">
  <iframe src='https://www.embed.com/app/math-game/'></iframe>
</div>

Upvotes: 0

user14026840
user14026840

Reputation:

Thats because what you embedded does not support Width and Height Given. You could do one Thing to enlarge. Use CSS with the iframe to make it compatible with Mobile as well as Desktop. Remove style='width: 800px; height: 600px;' CSS

canvas#cnvs   {
  width: 180px;
  height: 80px;
  background: url("https://yourcompany/yourlogo.jpg");
  background-position: center;
  background-size: cover;
}

Take the width and all things according. I have shared a sample to solve your problem

Upvotes: 1

Related Questions