Javasprictのclick()がわかりません

質問

WordPressで開いている動画をクリックすると閉じる方法を模索しています。

テーマの編集のfront-page.phpの一番下にて
<video class="video-background" autoplay="autoplay" loop="loop" muted="" width="300" height="150">
<source src="http://～.mp4" type="video/webm" />
</video>
と書き、
custom jsプラグインによるEdit JS Codeにて
$("video-background source").click(function(){
$("video-background source").css("display","none");
})
としました。

http://www.re-creators.jp/blog/2008/06/24_38.html
https://webkaru.net/jquery/click-event/
https://www.allinthemind.biz/markup/javascript/open_close.html

これらのサイトを参考したところこの書き方で間違いなさそうなのですがどこかミスがあるでしょうか？

基本的な事の質問になってしまっているかもしれないです、正直なところ１日中調べに調べてもわからず。。。質問した次第です；ヒントでも良いので助言を頂けると助かります。

回答No.5

4017B

＞結果は変わらなかった
回答文のコードが問題無く動作する事は確認済みですので。そうなるともっと根本的な原因があって、それがスクリプトの動作を阻害していると考えるのが妥当ですね。

WordPress云々と仰っていますので、その他のプラグインやテーマ本体で挿入しているスクリプトやCSS等が競合している可能性が高いと思われます。これ以上は実際のwebページのHTMLコードとそれに関連する全ての外部スクリプト＆CSSを全て総合的に検証してみない事には問題解決には近付けないと思われます。

回答No.4

4017B

え～っとまず大前提として「<source>タグには "display:*" の指定自体が無効」なので、仮にこのJSコードが過不足無く正常に動作したとしてもHTMLページ上では見た目の変化は何も起きません。つまり最初からそういうCSSの設定項目自体が存在しないので、存在しないCSSを幾ら変化させても何も起きません。

ではどうするかというと、"display:*" のCSS設定項目を持っている <video> に対して直に "display:*" を変化させる様にします。

(function($){
var v = $('.video-background'), v1 = v.get(0);
v.click(function(){
v1.pause();
v1.currentTime = 0;
v.css({'display':'none'});
});
})(jQuery);

とりあえず上記の記述例で chromeでは正常に動作する事を確認済みです。恐らくIEやFireFox等でも大丈夫だと思います。ただ、このコードを実行させると動画の部分が完全に抜け落ちて消えてしまう事になるので、HTMLページ上の見た目が大きく変化する事になります。まあ、とりあえず実際に試してみて、気になる点や疑問が湧いたら、また別途に質問してみてください。

お礼

非常に返信が遅れて済みません。
結果は変わらなかったです...。

回答No.3

hok212

こんばんは。

どのようなWordpressテーマをお使いになられているのか不明ですが、jQueryは正しく読み込まれていますか？

正しく読み込まれているのであれば、次のように書き換えるとどうでしょう。

$(".video-background source").click(function(){
$(".video-background source").css("display","none");
})
↓↓↓↓次のように書き換える↓↓↓↓
jQuery(".video-background source").click(function($){
$(".video-background source").css("display","none");
});

お礼

非常に返信が遅れて済みません。
結果は変わらなかったです...。

回答No.2

AsarKingChang

もしかしたら、わかったんですが・・・

それと、組み方を変えませんか？
<div class="abcd">
<video ////
<source ////
</div>
として、
どちらかをつかってください。
$("div.abcd").click(function(){　←　通常用
$(document).on("click", "div.abcd", function(){　←　DOM用
$("div.abcd video").css("display","none");
}
と、1階層上にあげてみてください。
多分、これでうまくいきます。
<video　←実際に表示してるのは、こっち！
<source　←これは、上のVIDEOに対するパラメタなので、こいつにNONEしても意味がない。

で、解決すると思いますよ。

では！お大事に～（病人かっ！）

お礼

二度も回答本当に有難う御座います！

済みません、HP作成が出来る程度の者にはレベルが高すぎてちょっとが手を出す範囲じゃなかったです(-_-;
専門用語がまずさっぱりで、そこから勉強してきます…

回答No.1

AsarKingChang

$("video-background source").click(function(){
$("video-background source").css("display","none");
})
先頭に"."がないですよ！
"video-background source"
これだと、Classではなく
「video-background」 という「タグ」を探して、
配下のsourceという「タグ」を差してます。
正しくは
「video-background」 という「クラス」を探させるのでは？

補足

回答有難うございます。忘れていました。入れましたが変わりませんでした…。他にもいろいろ方法を試してあらゆる所で質問しましたがダメで、解決する回答は来ませんでしたが一人が気になる事を言っていました。ブラウザがクリックを拾い切れていないとか。動画とか画像はボタン化しないといけないって事でしょうか。リンク化だと閉じるのではなく他ページに飛ぶか、同じＵＲＬ先にリンクすると動画が再表示されるだけですし。