勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

videoタグで表示させた動画をjQuery&CSSでフローティングビデオ対応させる方法

   2024/04/25  jQuery JavaScript CSS

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対応してみたい。

 - jQuery JavaScript CSS

  関連記事

YouTubeの埋め込み動画をjQuery&CSSでフローティングビデオ対応させる方法

以前にvideoタグで表示させた動画をjQuery&CSSでフローティン ...