Bootstrap Modal will not load PHP variables

Question

I am trying to load an iframe (youtube embed specifically) in a bootstrap modal. If I place the iframe code directly into the modal, it loads fine. But when I echo out the iframe code through a variable, it will not load. I can echo out the iframe outside of the modal, and it loads fine, it's just within the modal that the iframe will not load.

This works CASE 1

<div class="modal fade" id="video-modal" tabindex="-1" role="dialog" aria-labelledby="video-modalLabel"
     aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-body">
                <iframe width="1280" height="720" src="https://www.youtube.com/embed/9Gb7M7S6T7U" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
            </div>
        </div>
    </div>
</div>

This will also load the iframe CASE 2

<?php
    echo $video;
?>
<div class="modal fade" id="video-modal" tabindex="-1" role="dialog" aria-labelledby="video-modalLabel"
     aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-body">
            </div>
        </div>
    </div>
</div>

This does not work CASE 3

    <div class="modal fade" id="video-modal" tabindex="-1" role="dialog" aria-labelledby="video-modalLabel"
     aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-body">
                <?php
                    echo $video;
                ?>
            </div>

        </div>
    </div>
</div>

Any idea why?

For context, this is in Wordpress 5, PHP7, and the value of $video is being called from an ACF field.

do you see any content in the `
` if you do inspect element from the browser in the 2nd case? — khartnett, Mar 06 '19 at 21:38
I edited the question, so I assume you mean the third case. But the answer is no, nothing shows up, no html or anything — Leathel, Mar 06 '19 at 21:39
In the second case, it does show up (loading outside the modal, obviously) — Leathel, Mar 06 '19 at 21:41
hmm, that is odd. All the PHP is rendered on the server, so I'm thinking this may have something to do with the ACF plug-in.. — khartnett, Mar 06 '19 at 21:45
Just to troubleshoot, what happens if you change the echo to `echo var_export($video, true);` for cases 2 and 3? — khartnett, Mar 06 '19 at 21:46
Case 2 renders the iframe, along with some rogue quotations. Case 3 does not render the iframe, but does have a couple rogue quotes' — Leathel, Mar 06 '19 at 21:51
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/189557/discussion-between-khartnett-and-leathel). — khartnett, Mar 06 '19 at 22:18

Leathel · Accepted Answer · 2019-03-07T16:24:27.523

After considerable research, I found a solution to this issue. It has something to do with the PHP executing before that section of HTML has been rendered, which stops any values being passed from PHP variables.

There are 2 possible solutions I know about, I used the latter.

Solution 1 is outlined in this SO Question

Solution 2 was to

Localize the iframe string using wp_localize_script
Use jQuery to get the string from the localized data
".html()" the iframe string into the modal body

That jQuery looks something like this

(function ($, video_data) {
$(document).ready(function () {

    var video = video_data.video_data['video'];

    $('#video-modal').find('.modal-body').html(video);


});})(jQuery, video_data);

Bootstrap Modal will not load PHP variables

1 Answers1