YouTubeをポップアップで再生できるようにしたい

0
いいねをした人: 居ません
  • このトピックには4件の返信、3人の参加者があり、最後にm-szkにより2年、 9ヶ月前に更新されました。
5件の投稿を表示中 - 1 - 5件目 (全5件中)
  • 投稿者
    投稿
  • #83042
    m-szk
    閲覧者
    24

    【お使いの Snow Monkey のバージョン】15.1.0
    【お使いの Snow Monkey Blocks のバージョン】12.0.1
    【お使いの Snow Monkey Editor のバージョン】6.0.0
    【当該サイトのURL】https://romanee.boy.jp/test/

    ### 実現したいこと

    YouTubeをポップアップ表示して再生できるようにしたいです。

    ※【当該サイトのURL】の下の方に「YouTube動画」というリンクがあると思います。そちらをポップアップにしたいです。(本番では文字でなく画像にする予定です。)

     

    ### 発生している問題

    プラグイン「easy fancybox」を使用したいと考えています。
    こちらのプラグインは画像をクリックしたときにポップアップ表示できるもので、
    YouTubeも対応しています。

    YouTube用の設定をして試したところ、ポップアップができず、
    直接YouTubeサイトへつながってしまいます。

    対応策はあるでしょうか。

     

    ### 試したこと

    他のプラグインと競合していないか確認をしたところ、
    「My Snow Monkey 」を無効化すると正常にポップアップされるようでした。

    (画像でしたら「My Snow Monkey」を有効化していてもポップアップできました。)

    0
    いいねをした人: 居ません
    #83047
    まーちゅう
    参加者
    356

    こんにちは。
    My Snow Monkey が原因ということは、独自にカスタマイズされているコードのどれかに問題があるということですので、どういうカスタマイズをされているかが分からないと、対処のしようがないですね。

    それと、https://romanee.boy.jp/test/ にベーシック認証をかけられているので、サイトの確認もできないです。

    2
    いいねをした人:
    #83055
    m-szk
    閲覧者
    24

    まーちゅう 様

    ありがとうございます。

    >>My Snow Monkey が原因ということは、独自にカスタマイズされているコードのどれかに問題があるということですので、どういうカスタマイズをされているかが分からないと、対処のしようがないですね。

    なるほど…
    まだ序盤ですが私が入れているコードは下記です。
    ▼style.css
    .c-section.p-section-front-page-content { padding-bottom: 0; padding-top: 0; }

    ▼my-snow-monkey.php

    <?php
    /**
     * Plugin name: My Snow Monkey
     * Description: このプラグインに、あなたの Snow Monkey 用カスタマイズコードを書いてください。
     * Version: 0.2.1
     *
     * @package my-snow-monkey
     * @author inc2734
     * @license GPL-2.0+
     */
    
    /**
     * Snow Monkey 以外のテーマを利用している場合は有効化してもカスタマイズが反映されないようにする
     */
    $theme = wp_get_theme( get_template() );
    if ( 'snow-monkey' !== $theme->template && 'snow-monkey/resources' !== $theme->template ) {
    	return;
    }
    
    /**
     * Directory url of this plugin
     *
     * @var string
     */
    define( 'MY_SNOW_MONKEY_URL', untrailingslashit( plugin_dir_url( __FILE__ ) ) );
    
    /**
     * Directory path of this plugin
     *
     * @var string
     */
    define( 'MY_SNOW_MONKEY_PATH', untrailingslashit( plugin_dir_path( __FILE__ ) ) );
    
    add_action(
    	'snow_monkey_prepend_body',
    	function() {
    		?>
    		<div class="c-page-effect" data-page-effect="fadein" aria-hidden="false">
    			<div class="c-page-effect__item">
    				<div class="c-circle-spinner"></div>
    			</div>
    		</div>
    		<?php
    	}
    );
    
    // 実際のページ用の CSS 読み込み
    add_action(
    	'wp_enqueue_scripts',
    	function() {
    		wp_enqueue_style(
    			'my-snow-monkey',
    			untrailingslashit( plugin_dir_url( __FILE__ ) ) . '/style.css',
    			[ Framework\Helper::get_main_style_handle() ],
    			filemtime( plugin_dir_path( __FILE__ ) )
    		);
    	}
    );
    
    // エディター用の CSS 読み込み
    add_action(
    	'after_setup_theme',
    	function() {
    		add_editor_style( '/../../plugins/my-snow-monkey/style.css' );
    	}
    );
    
    //bodyにスラッグのクラス名
    add_filter( 'body_class', 'add_page_slug_class_name' );
    function add_page_slug_class_name( $classes ) {
      if ( is_page() ) {
        $page = get_post( get_the_ID() );
        $classes[] = $page->post_name;
      }
      return $classes;
    }
    
    // headへ埋め込み
    add_action( 'wp_head', function() {
     ?>
    <?php
    });
    
    add_action('init', 'my_post_type' );
    
    // ページスラッグがcontactのとき以外、「reCAPTCHA」を読み込ませない
    function load_recaptcha_js() {
    	if ( ! is_page( 'contact' ) ) {
    		wp_deregister_script( 'google-recaptcha' );
    	}
    }
    add_action( 'wp_enqueue_scripts', 'load_recaptcha_js',100);

    >>それと、https://romanee.boy.jp/test/ にベーシック認証をかけられているので、サイトの確認もできないです。

    失礼しました。
    ロックを解除しました。ご確認できるでしょうか。

    0
    いいねをした人: 居ません
    #83066
    GONSY
    参加者
    807

    m-szkさん

    横から失礼します。
    原因はプリローダーの可能性があると思いますので、いったんmy-snow-monkey.phpの以下だけ削除してみてください。

    add_action(
    	'snow_monkey_prepend_body',
    	function() {
    		?>
    		<div class="c-page-effect" data-page-effect="fadein" aria-hidden="false">
    			<div class="c-page-effect__item">
    				<div class="c-circle-spinner"></div>
    			</div>
    		</div>
    		<?php
    	}
    );
    3
    いいねをした人:
    #83108
    m-szk
    閲覧者
    24

    GONSY 様

    該当箇所を削除してみたところ、ポップアップ表示できました。
    ありがとうございます。

    ローディング画面は別で考えてみます。

    1
    いいねをした人:
5件の投稿を表示中 - 1 - 5件目 (全5件中)
  • トピック「YouTubeをポップアップで再生できるようにしたい」には新しい返信をつけることはできません。

ドキュメント

Snow Monkey の設定方法やマニュアルを掲載しています。

ドキュメント

フォーラム

Snow Monkey の使い方やカスタマイズについてのご質問・ご要望等はサポートフォーラムで行っています。サポートフォーラムは誰でも閲覧できますが、書き込みできるのは Snow Monkey 購入者のみとなります。

サポートフォーラム

よくあるご質問

Snow Monkey のサービスについて不明な点がある場合は、まずはよくあるご質問をご確認ください。

よくあるご質問

お問い合わせ

よくあるご質問を見ても解決しなかった場合、試用版の申請については問い合わせフォームからお願いいたします。

お問い合わせ

Snow Monkey は Gutenberg ブロックエディターに対応した 100%GPL の WordPress テーマです。拡張性を意識した開発をおこなっており、カスタマイザーとブロックでスピーディーにサイトを立ち上げるだけでなく、CSS やフックを駆使した高度なカスタマイズにも柔軟に対応できます。