動画をフルスクリーン表示した上に画像を表示させたい

Question

###前提・実現したいこと
動画を効率よく見るサイトを自分のために作ったのですが、
いままでのコードだと、いちいちフルスクリーン表示を解除してから
ネクストボタンをおさないと次の動画にいけませんでした。

そこでフルスクリーン表示のまま次の動画にいけるように設計したいと思いました。
フルスクリーン表示以外の時は画像ボタンを非表示にして、
フルスクリーン時にマウスオーバーすると画像ボタンが
出てきてそれをクリックすると次の動画にいけるようにしたいです。

###発生している問題・エラーメッセージ
videoのz-indexを0にして、画像のほうを1にしたのですが重い通りにいきませんでした。

###コード

:
</header>
<main>
  <video src="sample.mp4"></video>
  <img src="next.png">
</main>
<footer>
:
<script>
$(function(){
  $('video').mouseover(function(){
       $('img').show();
  }).mouseout(function(){
       $('img').hide();
  });
});
</script>

main{}
   video{
      width: 800px;
      height: 450px;
      z-index: 0;
   }
   img{
      width: 250px;
      height: 250px;
      z-index: 1;
   }

Comments

[m.ts10806]

質問テンプレートをお使いとお見受けしますが、「該当のソースコード」に現在のソースコードを入力するようなテンプレートになっています。この文章だけでは質問者さんがどのようなコードを組まれて悩んでいるかがわからないので、ソースコードをご提示願います。おそらくhtml,css（場合によりjavascript）の提示が必要そうに思います。

[codetaisei]

ありがとうございます。わかりました。

Answer 1

ソースありがとうございます。
ご提示の方法だと
[動画][画像]
と並べて表示されるものと思います。
ポイントはvideoに乗せたい要素を「固定位置にする（video左上からの距離指定も含めて）」こと。

こちらの質問は参考になりますでしょうか？
HTML Videoタグの上にDiv要素を配置する方法

追記

ただ、現状のshow(),hide()の書き方だとかなり頻繁にちらつき、クリックしづらいかもしれません。
ボタンの位置や、現れるタイミング、隠すタイミングを別途検討しなおした方が使いやすいと思います。

Comments

[codetaisei]

回答ありがとうございます。
これを試しましたが、自分の思っていたのとちがいました。
これだとフルスクリーン表示したときに画像ボタンが見えなくなってしまいます。

[m.ts10806]

参考先を見てどのように改修されたのか質問に追記していただいてよろしいでしょうか。

[codetaisei]

画像ボタンをあきらめて右クリックでできるようにしました。