WordPressで、画像をクリックするとポップアップで動画再生できる画面を作成したい（Underscores、colorbox使用）

Question

前提・実現したいこと

WordPressで、動画検索サイトを作成しています。
一覧にあるサムネイル画像をクリックするとポップアップで動画が開いて自動再生されるように実装したいのです。

下記のテーマとプラグインを使用しています。
テーマ：Underscores（https://underscores.me/）
プラグイン：colorbox（http://www.jacklmoore.com/colorbox/）

ちなみに、動画再生はポップアップでなくても、画面サイズいっぱいに表示できればいいのですが、「閉じるボタン」をクリックして閉じるような仕様にしたいので、ポップアップで画面サイズいっぱいに表示するのがいいかと思ってそうしています。

困っていること

このサイト（↓）を参考に、まずはクリックするとポップアップで動画再生する機能を作成してみました。
▼colorboxを使用してポップアップしたあとに動画を自動再生したい
http://creatornote.nakweb.com/popup_autoplay/

ですが、動かずに困っています。

具体的にいうと、
「クリックすると動画が表示されるよ」という文字をクリックしても、ポップアップも開きませんし、何も起きません。

唯一、ブラウザのURLが
「http://localhost/」→「http://localhost/#movie_test」に変化します。

該当のソースコード

<section class="movie_wrap">
  <div class="mv_map">
    <a class="inline" href="#movie_test">
      <p>クリックすると動画が表示されるよ</p>
    </a>
   </div>
  </section>
 <div style="display: none;">
    <div id="movie_test" class="movie_list_wrap">
    
    <video preload="auto" controls id="video">
    	<source src="http://creatornote.nakweb.com/wp-content/themes/giraffe/images/test.mp4" type="video/mp4" class="mv01">
    </video>
    </div>
</div>

/*
    Colorbox Core Style:
    The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden; -webkit-transform: translate3d(0,0,0);}
#cboxWrapper {max-width:none;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;}
.cboxIframe{width:100%; height:100%; display:block; border:0; padding:0; margin:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}

/* 
    User Style:
    Change the following styles to modify the appearance of Colorbox.  They are
    ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:#000; opacity: 0.9; filter: alpha(opacity = 90);}
#colorbox{outline:0;}
    #cboxContent{margin-top:20px;background:#000;}
        .cboxIframe{background:#fff;}
        #cboxError{padding:50px; border:1px solid #ccc;}
        #cboxLoadedContent{border:5px solid #000; background:#fff;}
        #cboxTitle{position:absolute; top:-20px; left:0; color:#ccc;}
        #cboxCurrent{position:absolute; top:-20px; right:0px; color:#ccc;}
        #cboxLoadingGraphic{background:url(images/loading.gif) no-repeat center center;}

        /* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
        #cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; width:auto; background:none; }
        
        /* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
        #cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}
        
        #cboxSlideshow{position:absolute; top:-20px; right:90px; color:#fff;}
        #cboxPrevious{position:absolute; top:50%; left:5px; margin-top:-32px; background:url(images/controls.png) no-repeat top left; width:28px; height:65px; text-indent:-9999px;}
        #cboxPrevious:hover{background-position:bottom left;}
        #cboxNext{position:absolute; top:50%; right:5px; margin-top:-32px; background:url(images/controls.png) no-repeat top right; width:28px; height:65px; text-indent:-9999px;}
        #cboxNext:hover{background-position:bottom right;}
        #cboxClose{position:absolute; top:5px; right:5px; display:block; background:url(images/controls.png) no-repeat top center; width:38px; height:19px; text-indent:-9999px;}
        #cboxClose:hover{background-position:bottom center;}

jQuery(document).ready(function($){
    $('.inline').on('click', function(){
        $(".inline").colorbox({
            inline: true,
            rel:'group',
                  closeButton:'true',
            onComplete: function(){
            var video = $("#video").get(0).play();
                }
            }); 
        });
    }); 

また、ダウンロードしたCSSとJSを読み込むため、「function.php」に下記のコードを書いています。

// CSS呼び出し
function twpp_enqueue_styles() {
wp_enqueue_style( 'colorbox-style', 'http://localhost/wp-content/themes/underscores/colorbox.css' );
}

add_action( 'wp_enqueue_scripts', 'twpp_enqueue_styles' );

// Javascript呼び出し
if (!is_admin()) {
function register_script(){
wp_register_script( 'jqery', get_template_directory_uri() .'/js/jqery.js');
wp_register_script( 'colorbox', get_template_directory_uri() .'/js/jquery.colorbox-min.js');
}
function add_script() {
register_script();
wp_enqueue_script('jqery');
wp_enqueue_script('colorbox');
}
add_action('wp_enqueue_scripts', 'add_script');
}

試したこと

表示した画面で「ページのソースを表示」をして、CSSとJSが読み込めていることは確認済みです。
コードに間違いがあるのかと思い、何回も見直したりしていますが、わかりません。。

どなたかご教授お願いいたします。

試したこと（追記）

投稿の中にvideoタグを挿入して動画が再生されるかを試したところ、こちらは問題なく動画再生されました。

<video controls autoplay src="http://creatornote.nakweb.com/wp-content/themes/giraffe/images/test.mp4"/></video>

Comments

[momosiri]

再生する動画はサイト内にアップしたものですか？外部（Youtubeなど）の動画ですか？？

[kawatomo]

上記コードに記載のURLは、参考にしたサイトで使用されていた動画のURLです。サイト内にアップした動画のURLに変更して試しても同様の結果でした。

[kawatomo]

早速ありがとうございます！！

[momosiri]

普通にvideoタグ使って投稿などに挿入したらどうなりますか？？

[kawatomo]

返信が遅くなりすみません！投稿の中にvideoタグで挿入してみたところ、動画の表示、再生はできました。
挿入したコードは「試したこと（追記）」に記載しました。