Custom Meta box only returns most recent value on page

I created a custom post type and a custom meta box where I create a new post and input a Youtube URL into the meta box, and I call for it on a custom template page inside an iframe that is inside in a modal (Drublic CSS modal) window where clicking on the post title will open the modal window.

The meta box will return a value on the page, however it displays the most recent URL entered for each of the posts when you open the modal.

How do I get each modal box to display the video assigned to it?

If this is confusing, here’s the page that the error is on: http://www.josephkatool.com/Pell/media

and below is the code from the post:

<?php query_posts( 'post_type=videos');?>

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

<article class="post" id="post-<?php the_ID(); ?>">

<h2><a href="#modal-text" class="call-modal" ><?php the_title(); ?></a></h2>

<section class="semantic-content" id="modal-text" tabindex="-1"

 role="dialog" aria-labelledby="modal-label" aria-hidden="true">

<div class="modal-inner">
<div class="modal-content">

<iframe width="560" height="315" src="//<?php echo get_post_meta($post->ID, "pell_video_url", true); ?>" frameborder="0" allowfullscreen></iframe> 

</div>
</div>

<a href="#!" class="modal-close" title="Close this modal" data-close="Close" data-dismiss="modal">×</a>
</section>

</article>

<?php endwhile; endif; ?>

I’ve been trying to figure this out for a while now and I think I’m losing my mind!! Thanks!

Edit: Here’s the code I use to save the meta boxes:

 function pell_video_save_post_class_meta( $post_id, $post ) {

if ( !isset( $_POST['pell_video_url_nonce'] ) || !wp_verify_nonce( $_POST['pell_video_url_nonce'], basename( __FILE__ ) ) )
    return $post_id;

$post_type = get_post_type_object( $post->post_type );

if ( !current_user_can( $post_type->cap->edit_post, $post_id ) )
    return $post_id;

$new_meta_value = ( isset( $_POST['pell-video-url'] ) ? esc_attr( $_POST['pell-video-url'] ) : '' );

$meta_key = 'pell_video_url';

$meta_value = get_post_meta( $post_id, $meta_key, true );

if ( $new_meta_value && '' == $meta_value )
    add_post_meta( $post_id, $meta_key, $new_meta_value, true );

elseif ( $new_meta_value && $new_meta_value != $meta_value )
    update_post_meta( $post_id, $meta_key, $new_meta_value );

elseif ( '' == $new_meta_value && $meta_value )
    delete_post_meta( $post_id, $meta_key, $meta_value );
}

Here’s the js. It’s the Drublic CSS js script:

(function (global) {

    'use strict';

    // Storage variable
    var modal = {};

    // Store for currently active element
    modal.lastActive = undefined;
    modal.activeElement = undefined;

    // Polyfill addEventListener for IE8 (only very basic)
    modal._addEventListener = function (element, event, callback) {
        if (element.addEventListener) {
            element.addEventListener(event, callback, false);
        } else {
            element.attachEvent('on' + event, callback);
        }
    };

    // Hide overlay when ESC is pressed
    modal._addEventListener(document, 'keyup', function (event) {
        var hash = window.location.hash.replace('#', '');

        // If hash is not set
        if (hash === '' || hash === '!') {
            return;
        }

        // If key ESC is pressed
        if (event.keyCode === 27) {
            window.location.hash = '!';

            if (modal.lastActive) {
                return false;
            }

            // Unfocus
            modal.removeFocus();
        }
    }, false);

    // Convenience function to trigger event
    modal._dispatchEvent = function (event, modal) {
        var eventTigger;

        if (!document.createEvent) {
            return;
        }

        eventTigger = document.createEvent('Event');

        eventTigger.initEvent(event, true, true);
        eventTigger.customData = { 'modal': modal };

        document.dispatchEvent(eventTigger);
    };


    // When showing overlay, prevent background from scrolling
    modal.mainHandler = function () {
        var hash = window.location.hash.replace('#', '');
        var modalElement = document.getElementById(hash);
        var htmlClasses = document.documentElement.className;
        var modalChild;
        var oldModal;

        // If the hash element exists
        if (modalElement) {

            // Get first element in selected element
            modalChild = modalElement.children[0];

            // When we deal with a modal and body-class `has-overlay` is not set
            if (modalChild && modalChild.className.match(/modal-inner/)) {
                if (!htmlClasses.match(/has-overlay/)) {

                    // Set an html class to prevent scrolling
                    document.documentElement.className += ' has-overlay';
                }

                // Unmark previous active element
                if (modal.activeElement) {
                    oldModal = modal.activeElement;
                    oldModal.className = oldModal.className.replace(' is-active', '');
                }
                // Mark modal as active
                modalElement.className += ' is-active';
                modal.activeElement = modalElement;

                // Set the focus to the modal
                modal.setFocus(hash);

                // Fire an event
                modal._dispatchEvent('cssmodal:show', modal.activeElement);
            }
        } else {
            document.documentElement.className =
                    htmlClasses.replace(' has-overlay', '');

            // If activeElement is already defined, delete it
            if (modal.activeElement) {
                modal.activeElement.className =
                        modal.activeElement.className.replace(' is-active', '');

                // Fire an event
                modal._dispatchEvent('cssmodal:hide', modal.activeElement);

                // Reset active element
                modal.activeElement = null;

                // Unfocus
                modal.removeFocus();
            }
        }
    };

    modal._addEventListener(window, 'hashchange', modal.mainHandler);
    modal._addEventListener(window, 'load', modal.mainHandler);

    /*
     * Accessibility
     */

    // Focus modal
    modal.setFocus = function () {
        if (modal.activeElement) {

            // Set element with last focus
            modal.lastActive = document.activeElement;

            // New focussing
            modal.activeElement.focus();
        }
    };

    // Unfocus
    modal.removeFocus = function () {
        if (modal.lastActive) {
            modal.lastActive.focus();
        }
    };

    // Export CSSModal into global space
    global.CSSModal = modal;

}(window));