1

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));
  • Please file an edit and show how you save the meta box contents. Thanks. – kaiser Jan 16 '14 at 3:30
  • @kaiser I edited the post to add the code! Thanks! – awkbreak Jan 16 '14 at 5:03
  • @shahpranaf I added the js to the op – awkbreak Jan 16 '14 at 6:46
0

The problem is with your js. When you click on first video post. It adds video code to the iframe i.e modal. When you click on second video, it doesn't add video code related to second post to iframe(modal).
Confusing?
Refresh your page and click on 2nd or 3rd video. It will show proper. Now click on any video post again. it will show video of 2nd post only.

For this reset your iframe when any video is clicked. So it will first empty iframe and then will add code of that video.

If still problem. then just add your js here, will tell you where problem is/

  • I added the js to the original post. How do I go about resetting the iframe? thanks for the help!! – awkbreak Jan 16 '14 at 5:55
  • whenever I refresh the page and click the second or third video it still shows me the most recent video... – awkbreak Jan 16 '14 at 18:05
  • its working proper now. – shahpranaf Jan 17 '14 at 5:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.