Modal not compatible with iframe

AxelBriche commented 11 years ago

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

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

Thanks.

crnacura commented 11 years ago

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 11 years ago

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 11 years ago

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 11 years ago

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 11 years ago

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

$('',{ 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 11 years ago

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

codrops / ModalWindowEffects

Modal not compatible with iframe #3