ビデオにボタンを配置する

Question

ウェブページにビデオを表示しようとしましたが、ボタンのカスタムスタイルを使用することに決めました。問題は、私が望むように私は本当にそれらを配置することができないということです。もし私がcss position：absoluteを使用してマージンを使用すると、ウィンドウを小さくすると、ミュートとフルスクリーンのボタンが一緒にマージされます。それらを互いに遠ざける方法はありますか？

#full-screen { 
 
    height: 22px; 
 
    width: 22px; 
 
    position: absolute; 
 
    background-color: transparent; 
 
    margin-top: -45px; 
 
    margin-left: 95%; 
 
} 
 

 
#mute { 
 
    height: 22px; 
 
    width: 22px; 
 
    position: absolute; 
 
    background-color: transparent; 
 
    margin-top: -45px; 
 
    margin-left: 90%; 
 
    margin-right: 10px; 
 

 
}

<div id="video_container"> 
 
    <video id="video" width="100%"> 
 
     <source src="video/video.mp4" type="video/mp4"> 
 
     <source src="video/video.ogg" type="video/ogg"> 
 
    </video> 
 
<!-- Video Controls --> 
 
    <div id="video-controls"> 
 
    <button type="button" id="play-pause"><input type="image" src="buttons/play.png"></button> 
 
    <progress id="progress" value="0" min="0"> 
 
     <span id="progress-bar"></span> 
 
     </progress> 
 
    <button type="button" id="mute"><input type="image" src="buttons/volumeOn.png"></button> 
 
    <button type="button" id="full-screen"><input type="image" src="buttons/fullScreen.png"></button> 
 
    </div> 
 
</div

Answer 1

あなたの問題を解決するために、これを試してみてください。このコードは、ビデオコントロールdiv内のボタンを設定する

#video-controls{ 
position:relative; 
}