勉強したことのメモ

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

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

  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

  関連記事

jQuery Alert Dialogsで表示後に処理したい

最近携わったサイトの中でJavaScript内に「jAlert」とかいう記述があ ...

ラジオボタンのカスタムデータ属性を取得し、特定の値の場合はチェックさせない方法

ASPを使用したサイトで特定のradioボタンは選択不可にしたいというケースがあ ...

テキストエリアのリアルタイムプレビュー

テキストエリア内に書いた内容をリアルタイムで プレビューする機能が必要となり、教 ...

FlashとjQueryを組み合わせたプラグインでWebカメラで撮影した画像をアップロード

FlashとjQueryを組み合わせたプラグインを用いてWebカメラで撮影した画 ...

jQueryプラグインでクリップボードにコピーする方法(clipboard.js)

ページ上のボタンをクリックすることで特定の文章をクリップボードにコピーしたかった ...