質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.77%

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

受付中

回答 0

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 1,817

score 10

 前提・実現したいこと

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>
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正の依頼

  • kawatomo

    2018/10/11 21:25

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

    キャンセル

  • momosiri

    2018/10/11 23:08

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

    キャンセル

  • kawatomo

    2018/10/12 12:36 編集

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

    キャンセル

まだ回答がついていません

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.77%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

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