유튜브 동영상을 웅장한 팝업창에 삽입하는 방법은?

유튜브 동영상을 웅장한 팝업창에 삽입하는 방법은?

멋진 팝업 플러그인이 있습니다.팝업에는 영상이 안 나오는데 어떻게 하면 유튜브 영상을 웅장한 팝업창에 담을 수 있을까요?

메뉴얼에 대해서는, 다음의 링크를 참조해 주세요.

문서

$(document).ready(function() {
    $('.popup-youtube, .popup-vimeo, .popup-gmaps').magnificPopup({
        disableOn: 700,
        type: 'iframe',
        mainClass: 'mfp-fade',
        removalDelay: 160,
        preloader: false,

        fixedContentPos: false
    });
});

<a class="popup-youtube" href="http://www.youtube.com/watch?v=0O2aH4XLbto">Open YouTube video</a>

이게 도움이 됐으면 좋겠다.

디폴트로는 각 서비스에 대해 1종류의 URL만 지원하므로 YouTube/Vimeo의 거의 모든 비디오 URL 유형을 지원하도록 확장합니다.

http://dimsemenov.com/plugins/magnific-popup/documentation.html#iframe-type

$('.my-selector').magnificPopup({
    type: 'iframe',
    iframe: {
        patterns: {
            youtube: {
                index: 'youtube.com/', 
                id: function(url) {        
                    var m = url.match(/[\\?\\&]v=([^\\?\\&]+)/);
                    if ( !m || !m[1] ) return null;
                    return m[1];
                },
                src: '//www.youtube.com/embed/%id%?autoplay=1'
            },
            vimeo: {
                index: 'vimeo.com/', 
                id: function(url) {        
                    var m = url.match(/(https?:\/\/)?(www.)?(player.)?vimeo.com\/([a-z]*\/)*([0-9]{6,11})[?]?.*/);
                    if ( !m || !m[5] ) return null;
                    return m[5];
                },
                src: '//player.vimeo.com/video/%id%?autoplay=1'
            }
        }
    }
});

이 두 개의 속성을 복사하기만 하면 됩니다.iframe,type)를 클릭하여 Magnificate 팝업에 추가합니다.

훌륭한 출발점 로이, 하지만 유튜브는 특정 시간부터 시작되었고 요즘은 사용자들에게 더 많은 정보를 제공하기 때문에 이것을 좀 더 확장하자.youtu.be링크로 이동합니다.따라서 특정 타임라인의 시작 비디오를 포함하여 두 사례를 모두 일치시키기 위해 이렇게 합니다.마크업 오버라이드도 추가했으므로, 필요 없는 경우는 삭제해 주세요.

function extendMagnificIframe(){

    var $start = 0;
    var $iframe = {
        markup: '<div class="mfp-iframe-scaler">' +
                '<div class="mfp-close"></div>' +
                '<iframe class="mfp-iframe" frameborder="0" allowfullscreen></iframe>' +
                '</div>' +
                '<div class="mfp-bottom-bar">' +
                '<div class="mfp-title"></div>' +
                '</div>',
        patterns: {
            youtube: {
                index: 'youtu', 
                id: function(url) {   

                    var m = url.match( /^.*(?:youtu.be\/|v\/|e\/|u\/\w+\/|embed\/|v=)([^#\&\?]*).*/ );
                    if ( !m || !m[1] ) return null;

                        if(url.indexOf('t=') != - 1){

                            var $split = url.split('t=');
                            var hms = $split[1].replace('h',':').replace('m',':').replace('s','');
                            var a = hms.split(':');

                            if (a.length == 1){

                                $start = a[0]; 

                            } else if (a.length == 2){

                                $start = (+a[0]) * 60 + (+a[1]); 

                            } else if (a.length == 3){

                                $start = (+a[0]) * 60 * 60 + (+a[1]) * 60 + (+a[2]); 

                            }
                        }                                   

                        var suffix = '?autoplay=1';

                        if( $start > 0 ){

                            suffix = '?start=' + $start + '&autoplay=1';
                        }

                    return m[1] + suffix;
                },
                src: '//www.youtube.com/embed/%id%'
            },
            vimeo: {
                index: 'vimeo.com/', 
                id: function(url) {        
                    var m = url.match(/(https?:\/\/)?(www.)?(player.)?vimeo.com\/([a-z]*\/)*([0-9]{6,11})[?]?.*/);
                    if ( !m || !m[5] ) return null;
                    return m[5];
                },
                src: '//player.vimeo.com/video/%id%?autoplay=1'
            }
        }
    };

    return $iframe;     

}

$('.my-selector').magnificPopup({
    type: 'iframe',
    iframe: extendMagnificIframe()
});

웹사이트에서 셀프 호스팅된 동영상을 위해서도 같은 것이 필요했습니다.다음은 href를 비디오 소스로 사용한 해결 방법입니다.

JS

<script>
    $(document).ready(function() {
        $('.portfolio-popup-video').magnificPopup({
            disableOn: 700,
            mainClass: 'mfp-fade',
            removalDelay: 160,
            preloader: false,
            fixedContentPos: false,
            type: 'iframe',
            src: $('<video controls>\
                      <source src="'+$(this).attr('href')+'" type="video/webm">\
                      Désolé, votre navigateur ne supporte pas les vidéos.\
                    </video>')
        });
    });
</script>

HTML

<a class="portfolio-popup-video" href="/path/video-file.webm">

여기 암호가 있습니다. 도움이 되시길 바랍니다.

언급URL : https://stackoverflow.com/questions/21112025/how-to-embed-youtube-video-in-magnific-popup