Bouton d'incrustation HTML radio sur la vidéo

Je voudrais superposition Les boutons radio HTML sur le dessus d'une vidéo de sorte que vous pouvez les sélectionner. Je connais les coordonnées des pixels pour chacune des cases colorées si cela peut aider. Comme dans l'exemple ci-dessous, les cercles noirs représentent les boutons radio que je peux cliquer. Comment puis-je le formater en utilisant CSS? Bouton d'incrustation HTML radio sur la vidéo

<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>

Source

2017-07-07 Alex Ker

S'il vous plaît inclure un échantillon complet de votre code afin que nous puissions voir ce que vous avez et ce que vous avez essayé. – Ryan

@Ryan fait! S'il vous plaît retirer votre vote vers le bas. –

@Ryan savez-vous comment les positionner? –

Mon meilleur pari serait juste pour avoir les boutons radio position: absolute et de les déplacer sur la vidéo avec top: et right:.

JSfiddle demo

Source

2017-07-07 15:39:55 Zack

Merci pour cette démo, je la fais fonctionner mais comment positionner les boutons de manière à ce qu'ils soient sur des zones spécifiques de la vidéo? –

@AlexKer Que faites-vous par zones spécifiques? À des moments spécifiques ou à quel point devez-vous être spécifique à leur position? – Zack

Ils ne vont pas se déplacer. Si vous regardez l'image, je veux les boutons au-dessus de chaque boîte colorée. Je connais les coorindates pour ceux en pixels. –

Bouton d'incrustation HTML radio sur la vidéo

Répondre

Questions connexes