iframe을 이용한 유튜브 동영상 삽입방법

- iframe을 이용한 유튜브 동영상 삽입방법 

 

<div class="video_area">
    <!-- 비디오 요소가 들어 갈 위치 -->
</div>

<script type="text/javascript">
    // 비디오 api 선언
    var tag = document.createElement('script');
    tag.src = "https://www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

    // 유튜브 api module
    function onYouTubeIframeAPIReady() {
        var playerModule = function (videoObj) {
            this.player;
            this.$videoWrap = $('#' + videoObj.playerId + '').parent('.video_area');
            this.playerId = videoObj.playerId;
            this.videoId = videoObj.videoId;
            //this.posterSrc = videoObj.posterSrc;

            this._init();
        };

        playerModule.prototype._init = function () {
            this.$videoWrap.prepend(this.posterTemplete());
            var that = this,
                $btnPlay = that.$videoWrap.find('.playBtn'),
                videoTop = that.$videoWrap.offset().top,
                viewTop = $('.contents').find('h1').length > 0 ? $('.contents').find('h1').offset().top : 0,
                videoPlayer;

            var onPlayerReady = function (event) {
                
                $btnPlay.on('click', function () {
                    that.toggleKlass({
                        el: that.$videoWrap,
                        klass: 'playing'
                    });
                    event.target.playVideo();
                });
            }

            var onPlayerStateChange = function (event) {
                if (event.data == 0) that.toggleKlass({
                    el: that.$videoWrap,
                    klass: 'playing'
                });
            }

            // 유튜브 api 실행
            this.player = new YT.Player(that.playerId, {
                videoId: that.videoId,
                playerVars: {
                    rel: 0,
                    playsinline: 1,
                    disablekb: 1
                },
                events: {
                    'onReady': onPlayerReady,
                    'onStateChange': onPlayerStateChange
                }
            });
        };
        playerModule.prototype.posterTemplete = function () {
            var imgSrc = this.posterSrc ? this.posterSrc : '//img.youtube.com/vi/' + this.videoId + '/maxresdefault.jpg';
            var templete = '<div class="poster_area">' +
                '<span class="img"><img class="poster" src="'+imgSrc+'" alt=""></span>' +
                '<a href="javascript:;" class="playBtn"> <span class="playIco medium"></span> </a>' +
                '</div>';
            return templete;
        };
        playerModule.prototype.toggleKlass = function (obj) {
            obj.el.hasClass(obj.klass) ? obj.el.removeClass(obj.klass) : obj.el.addClass(obj.klass);
        };

        $(document).ready(function() {
            /* S : 2020-01-17 추가 */
            if($('#youtube_vod').size() > 0) {
                $('.video_area').removeClass('playing');
            }
            $('.video_area').html('<div id="youtube_vod"></div>');
            /* E : 2020-01-17 추가 */
            
            var video = new playerModule({
                playerId: 'youtube_vod', // tag id
                videoId: 'z_Bfl7jy9P4', // 유튜브 비디오 id, ex) 유튜브 소스코드 복사후 해당ID 복사 <iframe width="1280" height="720" src="https://www.youtube.com/embed/해당ID" ></iframe>
            });
        });

        $(window).bind("popstate", function (event) {
            if($('#youtube_vod').size() > 0) {
                $('.video_area').removeClass('playing');
            }
            $('.video_area').html('<div id="youtube_vod"></div>');
            
            var video = new playerModule({
                playerId: 'youtube_vod', // tag id
                videoId: '유튜브 비디오 id', // 유튜브 비디오 id
            });
        });
    }
</script>

 

아래 popstate를 바인딩 시킨 이유는, safari나 firefox환경에서 historyback 시,

BFCache로 인해 동영상이 무음으로 재생되면서, 볼륨조절이 먹통이 되는 현상을 해결하기 위해 추가 되었다.