CODEWITHSUNDEEP
htmlcssiframe
Dónal
Dónal

Reputation: 187529

Styling an iframe

I'm using the excellent Jalbum to create a photo album for a website. Each page of the generated photo album is a complete webpage, so the recommended way to embed the album within a website is to use an iframe.

A problem arises when I want to style the images contained within the embedded iframe. If I add a rule such as: 

img { 
    -ms-interpolation-mode: bicubic; 
}

to my stylesheet, it does not select the images within the iframe. Is there a way to select elements contained within an embedded iframe?

Of course, I could manually edit the CSS file created by Jalbum before I embed the iframe, but I would need to remember to do this every time I regenerate the album.

Upvotes: 1

Views: 1511

Answers (2)

martin.code
martin.code

Reputation: 1311

From my experience it is just about making CSS rules that are more specific than the rules within the iframe itself. this can be accomplished by for instance giving an ID to the iframe, and have that has the outer element, making it more specific (LESS example with a livestream embed that we are using on our platform):

#livestream-iframe-wrapper {
width: 100%;
height: 100%;
    #livestream-viewer {
        width: 100%;
        height: 100%;
        #layout0, #layout1, #layout2, #layout3 {
            #layout4, #layout0-lsplayer, #layout1-lsplayer, #layout2-lsplayer, #layout3-lsplayer, #layout4-lsplayer {
                width: 100%;
                height: 100%;
                #lsplayer {
                    width: 100% ;
                    height: 100%;
                 }
             }
        }
    }
}

I cant give any specific information on how to do this for your case, but use the DOM inspector in the browser development tools to inspect the DOM and find the classes to override.

Upvotes: 0

airportyh
airportyh

Reputation: 22668

You could use JavaScript code to insert a CSS include into the document of the iframe.

Upvotes: 3

Related Questions