勉強したことのメモ

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

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

   2024/04/25  jQuery JavaScript CSS

以前にvideoタグで表示させた動画をjQuery&CSSでフローティングビデオ対応させる方法をメモしたが、今回はvideoタグではなくYouTubeの埋め込み動画に同機能を実装したい。videoタグからiframeタグへ変更となるため難しいかと思いきやほぼ同じ感じで対応できた。以下に実装方法とサンプルをメモ。

 

サンプル

https://taitan916.info/sample/FloatingVideo/youtube/

 

ソースコード

<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>youtube動画のFloatingVideo対応サンプル</title>
</head>
<style>
body{
    padding: 0;
    margin: 0;
}
@keyframes fade-in-up{
    0% {
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}
iframe{
    width: 100%;
    height: 100%;
}
.video{
    width: 100%;
    aspect-ratio: 16 / 9;
    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">
                <iframe src="https://www.youtube.com/embed/tAxcgLdFHrw" frameborder="0" gesture="media" allowfullscreen></iframe>
            </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タグの時とCSS部分が多少異なる。jQuery部分は同じとなる。

 - jQuery JavaScript CSS

  関連記事

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

Web上の動画をFloatingVideo対応したいという要望を受けた。ページ上 ...