※デベロッパーツール等でソースコードをご確認ください(Please check using Developer tools)
Watch the video
.wrap {
width: 768px;
margin: 50px auto 0;
}
.movie {
display: none;
position: relative;
width: 100%;
padding-top: 56.25%;
}
.movie.show {
display: block;
}
.movie iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.movie-text {
margin: 20px 0 0;
text-align: center;
cursor: pointer;
font-size: 28px;
font-weight: bold;
}
@media screen and (max-width:640px){
.wrap {
width: 100%;
}
}
$(function(){
$('.movie-text').on('click',function(){
const movie_id = $(this).attr("id");
$('.movie').addClass('show').append('<iframe width="600" height="338" src="https://www.youtube.com/embed/' + movie_id + '?rel=0&mute=1&loop=1&playlist=' + movie_id + '" frameborder="0" allowfullscreen></iframe>')
});
});