フリーランスのためのネットビジネス専門学校 ネットで独立開業を目指す人を応援
フリーランスのためのネットビジネス専門学校 ネットで独立開業を目指す人を応援

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

前提・実現したいこと

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

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

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

困っていること

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

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

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

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

該当のソースコード

HTML
<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.css
/*
    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;}

jqery.js
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’, ‘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が読み込めていることは確認済みです。
コードに間違いがあるのかと思い、何回も見直したりしていますが、わかりません。。

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

コメント

記事に戻る

コメントを残す