videoタグで表示させた動画をjQuery&CSSでフローティングビデオ対応させる方法
2024/04/25
Web上の動画をFloatingVideo対応したいという要望を受けた。ページ上でスクロールした際に右下等に小さい動画を表示させたいというもの。ピクチャーインピクチャーだとブラウザに依存しそうで難しいんじゃないかと思ったけど、そういった仕様であればなんとかなりそう。以下に実装方法とサンプルをメモ。
サンプル
https://taitan916.info/sample/FloatingVideo/video/
上記ページを開くと左上に動画プレイヤーが表示されるがページスクロールすると右下に小さいプレイヤーが表示される。
ソースコード
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>videoタグのFloatingVideo対応サンプル</title>
</head>
<style>
body{
padding: 0;
margin: 0;
}
@keyframes fade-in-up{
0% {
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
video{
width: 100%;
max-width: 500px;
}
.video.stuck {
position: fixed;
bottom: 0;
right: 0;
width: 200px;
transform: translateY(100%);
animation: fade-in-up 0.75s ease forwards;
z-index: 1;
}
.back_ground{
background-color: #ccc;
height: 3000px;
}
</style>
<body>
<div class="back_ground">
<div class="video_wrap">
<div class="video">
<video controls>
<source src="https://taitan916.info/blog/wp-content/uploads/2016/05/test.mp4" type="video/mp4" />
</video>
</div>
</div>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(function(){
const video_wrap = $('.video_wrap');
const video = $('.video');
const video_height = video.outerHeight();
//ページスクロールした際
$(window).on('scroll', function(){
//スクロール幅がvideoタグ部分の高さを超えた場合
if( $(this).scrollTop() > (video_height + video_wrap.offset().top) ){
//.stackを付与
video.addClass('stuck');
}else{
//.stackを削除
video.removeClass('stuck');
}
});
});
</script>
</body>
</html>
所感
videoタグだと問題無かったのでyoutube動画についてもその内FloatingVideo対応してみたい。
関連記事
-
YouTubeの埋め込み動画をjQuery&CSSでフローティングビデオ対応させる方法
以前にvideoタグで表示させた動画をjQuery&CSSでフローティン ...