Override iframe content css

Question

I have an iframe from another site enbedded in my site that looks like this:

    <iframe src="https://youcanbook.me/?noframe=true&skipHeaderFooter=true" id="ycbmiframe" style="width:100%;height:1000px;border:0px;background-color:transparent;" frameborder="0" allowtransparency="true"></iframe>
<script>
    window.addEventListener && window.addEventListener("message", function(event) {
        if (event.origin === "https://youcanbook.me") {
            document.getElementById("ycbmiframe").style.height = event.data + "px";
        }
    }, false);
</script>

Is there a way to override CSS?

Thanks

Possible duplicate of [CSS override body style for content in iframe?](http://stackoverflow.com/questions/6494721/css-override-body-style-for-content-in-iframe) — Muhammad Saqlain, Feb 27 '17 at 08:41
Already asked questions: The question: http://stackoverflow.com/questions/217776/how-to-apply-css-to-iframe Answer http://stackoverflow.com/questions/217776/how-to-apply-css-to-iframe/217833#217833 — Beni Sinca, Feb 27 '17 at 09:12

Billu · Answer 1 · 2018-07-30T19:18:31.240

iframe Content update using jquery

Note: Contact.html file must a class with name ".yourclass", both in css file and html file or you can class name as you need at all places html,css and script.

<html>
            <head>
                <title></title>
                <meta charset="UTF-8">
                <meta name="viewport" content="width=device-width, initial-scale=1.0">

                <style>
                    iframe {
                        border-top: #c00 1px dotted;
                        border-right: #c00 2px dotted;
                        border-left: #009bdf 2px dotted;
                        border-bottom: #255625 4px dotted;
                    }

                </style>
            </head>
            <body> 
                <iframe id="iframe" src="/contact.html" height="800" width="800">   
                </iframe>
                 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
                <script>
                    $(document).ready(function () {
                        $('iframe').load(function () {
                            $('iframe').contents().find("head")
                                    .append($("<style type='text/css'> .yourclass{color:#ff0000;} </style>"));
                        });
                    });
                </script>
            </body>
        </html>

score -1 · Answer 2 · edited May 23 '17 at 10:29

-1

You can use the following:

$('iframe').load( function() {
    $('iframe').contents().find("head")
      .append($("<style type='text/css'>  .my-class{display:none;}  </style>"));
});

Solution found here.

edited May 23 '17 at 10:29

Community

1
1

answered Feb 27 '17 at 08:42

Manuel Koch

331
2
14

Override iframe content css

2 Answers2