【CSS】動画の埋め込みと音量オンオフスイッチの実装
動画の埋め込みと音量オンオフスイッチの実装
以下の「<埋め込む動画のパス>」は書き換えてください。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- アイコン -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer">
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
<!-- //アイコン -->
<!-- オンオフスイッチ -->
<script>
$(function() {
var video = $("video").get(0);
$(".music").on("click", function() {
if (video.muted) {
video.muted = false;
} else {
video.muted = true;
}
});
});
</script>
<!-- //オンオフスイッチ -->
<!-- video -->
<div class="video-container">
<video src="<埋め込む動画のパス>" autoplay playsinline muted loop></video>
<div class="video-sidebar">
<div class="toggle_switch">
<input type="checkbox" name="xxx" id="cb_toggle_switch">
<label class="music" for="cb_toggle_switch"></label>
</div>
</div>
</div>
<!-- //video -->/* ====================================
ビデオ埋め込み
==================================== */
.video-container {
padding: 0;
text-align: center;
width: 100%;
border-radius: 5px;
aspect-ratio: 16 / 9;
}
video {
width: 100%;
height: auto;
border-radius: 5px;
}
/* オンオフスイッチ */
.video-sidebar {
position: absolute;
padding: 10px 10px;
margin-top: -45px;
font-size: 8px;
text-align: center;
color: rgba(255, 255, 255, .5);
width: 100%;
}
/* アイコンのサイズ */
.toggle_switch {
display: table;
font-size: 18px;
}
.toggle_switch>input {
display: none;
}
.toggle_switch>label {
display: block;
position: relative;
cursor: pointer;
}
.toggle_switch>input:checked+label {
color: rgba(255, 255, 255, .5);
}
/* ボリュームオンアイコン */
.toggle_switch>label::before {
position: absolute;
transition: 0.5s;
content: '\f6a9';
font-family: 'Font Awesome 5 Free';
font-weight: 900;
}
/* ミュートアイコン */
.toggle_switch>input:checked+label::before {
content: '\f028';
font-family: 'Font Awesome 5 Free';
font-weight: 900;
}
/* ====================================
//ビデオ埋め込み
==================================== */解説
ポイントとなる部分を解説します。
オンオフスイッチを実装するために以下をheadに記述します。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>音量オンオフのアイコンを使用するために以下をheadで記述します。
<!-- アイコン -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer">
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
<!-- //アイコン -->動画をループで自動再生させます。
<video src="<埋め込む動画のパス>" autoplay playsinline muted loop></video>CSSでアイコンを使う場合は以下のように記述します。
/* ミュートアイコン */
.toggle_switch>input:checked+label::before {
content: '\f028';
font-family: 'Font Awesome 5 Free';
font-weight: 900;
}ブランドのアイコンを使用する場合は「font-family」を以下のように記述します。
.toggle_switch>input:checked+label::before {
content: '\f19a';
font-family: "Font Awesome 5 Brands";
font-weight: 900;
}
コメント