/*HTML*/
/*CSS*/
#movie {
width:100%;
height:auto;
position:relative;
}
#movie::before {
display:block;
content:'';
width:100%;height:0;
padding-top:56.25%; /* ※1)ココがアスペクト比（縦横比）*/
}
#movie video {
display:block;
width:100%;
height:100%;
object-fit:cover;
position:absolute;top:0;left:0;right:0;bottom:0;
}
#movie-button {
width:80px;height:80px;
position:absolute;left:20px;bottom:40px;/*親要素に対する位置指定*/
cursor:pointer;/*カーソルを指に変更*/
z-index:1;
}
.movie-button {
display:flex;justify-content:center;align-items:center;/*#video-buttonの中央に配置*/
}
.movie-button span {
display:flex;flex-direction:column;justify-content:center;align-items:center;
color:#CF000F;font-size:1.2rem;
}
.movie-button span i {
font-size:2.6vw;/*アイコンの大きさを指定*/
}
/*jQuery*/
$(function(){
$('.movie-button-pause').show();
$('.movie-button-play').hide();
$("#movie-button").click(function (){
$('.movie-button').toggleClass('show');
if($('video')[0].paused){
$('video')[0].play();
$(this).addClass('current');
}else{
$('video')[0].pause();
$(this).removeClass('current');
}
if($('.movie-button').hasClass('show')){
$('.movie-button-pause').hide();
$('.movie-button-play').show();
}else{
$('.movie-button-pause').show();
$('.movie-button-play').hide();
}
});
});
