Search code examples
htmliframebackground-color

how to change background color of an iframe using external src

I have an Angular application. In a component HTML page, I am displaying flags and times of different places against a colored background. I am not being able to change the background color of the iframe. Tried suggestions at Change background color of iframe issue and some other sources Here is the sample HTML:

<link href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/2.3.1/css/flag-icon.min.css" rel="stylesheet" />
    <table cellspacing="0" style="font: normal 11pt Verdana;  float:left; margin-top:-60px;
        margin-bottom:150px;">
          <tr>
            <td style="text-align: center; padding: 0px 4px;">
              <span class="flag-icon flag-icon-us"></span>
              <br />
              <span style="color:whitesmoke; font-size:11px;font-weight:200;">Los Angeles</span><br />
              <iframe allowtransparency="true"  style="background-color:inherit;" src="http://free.timeanddate.com/clock/i2jzaeez/n155/fn17/fs9/fc999/th1/ts1"
                      frameborder="0" width="34" height="14"></iframe>

            </td>

            <td style="text-align: center; padding: 0px 4px;">
              <span class="flag-icon flag-icon-mx"></span>
               <br />
              <span style="color:whitesmoke;font-size:11px;font-weight:200;">Mexico City</span><br />
              <iframe src="http://free.timeanddate.com/clock/i2jzaeez/n155/fn17/fs9/fc999/th1/ts1" frameborder="0" width="34" height="14"></iframe>
            </td>
        </tr>
        </table>

And here is the image. Please guide

enter image description here

Solution

  • Using iframe settings did not work. However, I was able to conveniently make adjustments on their website and use the HTML generated:

    https://www.timeanddate.com/clocks/free.html