codrops/ModalWindowEffects

Modal not compatible with iframe

AxelBriche opened this issue · 6 comments

AxelBriche commented

Hello, your script is awesome but my iframe is black, have you a solution please ?

http://i.imgur.com/bTyntw5.jpg

My code:
http://i.imgur.com/ULWKeIN.jpg

Thanks.

crnacura commented

I just tried to embed a YouTube iframe and it works just fine. Are you sure that the video is loaded? Are you working locally? Are there any error messages in the console?

AxelBriche commented

Hello, localhost, 0 error inside my console.

My minimalist code:

<!DOCTYPE html>
<html lang="en">

    <head>
        <link rel="stylesheet" href="{{ asset("library/ModalWindowEffects/css/component.css") }}" />
    </head>
    <body>

        <!-- test  -->
        <iframe width="560" height="315" src="http://www.youtube.com/embed/ZJurCfvzKyo" frameborder="0" allowfullscreen></iframe>

        <div class="md-modal md-effect-1" id="modal-1">
            <div class="md-content">
                <iframe width="560" height="315" src="http://www.youtube.com/embed/ZJurCfvzKyo" frameborder="0" allowfullscreen></iframe>
                <button class="md-close">Close me!</button>
            </div>
        </div>
        <button class="md-trigger" data-modal="modal-1">Fade in &amp; Scale</button>
        <div class="md-overlay"></div>

        <script src="{{ asset("library/ModalWindowEffects/js/classie.js") }}"></script>
        <script src="{{ asset("library/ModalWindowEffects/js/modalEffects.js") }}"></script>

    </body>
</html>

render: http://i.imgur.com/D7KvfvM.jpg

First iframe is ok, but iframe inside modal is black :s

Sorry for my english, I am french.

AxelBriche commented

Hello, I come to you after various test:

Firefox => Black iframe
Safari (windows version) => The script doesn't work at all.
IE => (your website is ok, but test in localhost bug)
Opera => Works but with some lag.
Chrome => Work perfectly.

Tested with your demo index.html (just add an iframe) and your website on recent browser.

crnacura commented

I've tested it in FF (Mac) and it works fine. I don't see how the script would actually influence the behavior of the embedded video. Did you try to insert an iframe that points to a website?
It would be really helpful if you'd put your code online somewhere, otherwise I can't see what the problem is. Did you check if there are any errors showing up in the console?

kmilov commented

actually I have an iframe within this modal box and works like a charm on IE, Chrome, Safari and Firefox.

$('<iframe></iframe>',{
width : 988,
height : 570,
id : "iframeID",
src : "URL"
}).appendTo("#md-inner-content");

but you have to tweak the CSS to get the iFrame show perfectly.

AxelBriche commented

Hello, I have now a version available here: http://dev.modcanyon.com/csgo/videos/
Clic on blue button for test.

If I clic on an image, it's ok: http://puu.sh/4vkoP.jpg

If I clic on blue button (use your addon), bug: http://puu.sh/4vkrA.jpg
Iframe is black :S