Try this:

$.magnificPopup.open({
    items: {
        src: '<div id="test-modal" class="white-popup"><h1>Modal Test</h1><p>Test Some text.</p><p><a class="popup-modal-dismiss">Dismiss</a></p></div>',
        type:'inline'
    },
    modal: true
});

And the fiddle...

If you're using jQuery you could just listen for the window load event and then call the open method for your Magnific Popup like so:

(function($) {
    $(window).load(function () {
        // retrieved this line of code from http://dimsemenov.com/plugins/magnific-popup/documentation.html#api
        $.magnificPopup.open({
            items: {
                src: 'someimage.jpg'
            },
            type: 'image'

          // You may add options here, they're exactly the same as for $.fn.magnificPopup call
          // Note that some settings that rely on click event (like disableOn or midClick) will not work here
        }, 0);
    });
})(jQuery);

Option 1:

Add data-dismiss="modal" to your

<a class="popup-youtube" href="https://www.youtube.com/watch?v=alJ8FmokHBo">Open YouTube video</a>

to close the bootstrap modal.

I forked your JSFiddle to demonstrate this.

Option 2:

If you want to keep the modal open then increasing the z-index (2000 worked for me but the bottom line is it needs to be greater than the modal's z-index) on the Magnific Popupcontainer is the way to go.

<div class="mfp-wrap mfp-close-btn-in mfp-auto-cursor mfp-fade mfp-ready"
    tabindex="-1" 
    style="top: 0px; position: absolute; height: 386px; z-index: 2000">
    <div class="mfp-container mfp-iframe-holder">
        <div class="mfp-content">
            <div class="mfp-iframe-scaler">
                <button class="mfp-close" type="button" title="Close (Esc)">×</button>
                <iframe frameborder="0" allowfullscreen="" src="//www.youtube.com/embed/alJ8FmokHBo?autoplay=1" class="mfp-iframe"></iframe>
            </div>
        </div>
    </div>
</div>

Edit: I just checked and the .modal BootStrap class has a z-index of 1050 and the .mfp-wrap class has a z-index of 1043 which is why the modal is on top.

Here's another JSFiddle with the CSS modification instead of the data-dismiss.

Note that the Magnific Popup close button does not work. It also has a z-index that will need to be changed and there may be others as well. The data-dismiss option will be the cleanest unless you absolutely need the modal to stay open.