ビデオのオーバーレイHTMLラジオボタン

私はオーバーレイのHTMLラジオボタンを選択することができます。私は色のボックスのそれぞれのピクセルの座標を知っている場合はそれを知っている。下の例のように、黒丸はクリックできるラジオボタンを表します。どのように私はCSSを使用してそれをフォーマットするのですか？ビデオのオーバーレイHTMLラジオボタン

<style> 
    #container { 
     width: 428px; 
     height: 200px; 
     position: relative; 
    } 

    #overlay { 
     width: 100%; 
     height: 100%; 
     position: absolute; 
     top: 50px; 
     left: 50px; 
     color: red; 
     font-size: 40px; 
     z-index: 10; 
    } 

    #base { 
     width: 100%; 
     height: 100%; 
     position: absolute; 
     top: 0px; 
     left: 0px; 
    } 
</style> 
    </head> 
    <body> 
    <div id="container"> 
     <div id="overlay"> 
     <form action=""> 
      <input type="radio" name="white" value="1" /> 
      <input type="radio" name="white" value="2" /> 
      <input type="radio" name="white" value="3" /> 
      <input type="radio" name="white" value="4" /> 
      <input type="button" id="continue" value="Continue"/> 
     </form> 
     </div> 
     <div id="base"> 
     <video controls> 
      <source src="videos/event_0_Junli_Standing_20150322_181647_00_0.6.mp4" type="video/mp4"> 
      Your browser does not support the video tag. 
     </video> 
     </div> 
    </div> 
    </body>

出典

2017-07-07 Alex Ker

私たちはあなたが持っているものを見ると、何を試したことができますので、あなたのコードの完全なサンプルを記載してください。 – Ryan

@ライアン完了！投票を削除してください。 –

@ライアンあなたはそれらをどのように配置するのか分かりますか？ –

私の最善の策は、ちょうどposition: absoluteにラジオボタンがあり、top:とright:で映像の上にそれらを移動することです。

JSfiddle demo

出典

2017-07-07 15:39:55 Zack

デモをありがとう、私はそれを働かせているが、私はどのようにビデオの特定の領域にあるようにボタンを配置するのですか？ –

@AlexKerあなたは特定の分野で何をしていますか？特定の時点またはどのように具体的にそれらの位置を取る必要がありますか？ – Zack

彼らは動かないでしょう。画像を見ると、各色のボックスの上にボタンがあります。私はピクセルでそれらのcoorindatesを知っています。 –

ビデオのオーバーレイHTMLラジオボタン

答えて

関連する問題