1

I am trying to add CSS property inside the Air-Table iframe but CSS didn't reflect.

Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <iframe class="airtable-embed" id="calender" src="https://airtable.com/embed/shriqTxajodBzOTYb?backgroundColor=teal&viewControls=on" frameborder="0" onmousewheel="" width="100%" height="533" style="background: transparent; border: 1px solid #ccc;"></iframe>
</body>
</html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
    $('#calender').on('load', function() {
        $("iframe").contents().find("#embedBottomBarContainer").css("display", "none");
    }); 
});
</script>
Saad Masood
  • 312
  • 1
  • 2
  • 16

1 Answers1

0

If I remember correctly, you can only affect the Style of the IFrame if it comes from the same Server as your Website because of the same-origin policy.

So that's probably the problem. You're trying to change the Style of a not same-origin IFrame

Florian Bauer
  • 11
  • 1