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

Solution 1:

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

Solution 2:

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.