혼합 갤러리 (예 : 이미지와 동영상 중 하나가 혼합되어 있음)를 사용하는 경우 멋진 팝업으로 YouTube에 이미지가 삽입되는 방식을 무시할 수 있습니다.
무비 기본
이것이 ID는 모두 다음 V임을 의미
youtube: {
index: 'youtube.com/', // String that detects type of video (in this case YouTube). Simply via url.indexOf(index).
id: 'v=', // String that splits URL in a two parts, second part should be %id%
// Or null - full URL will be returned
// Or a function that should return %id%, for example:
// id: function(url) { return 'parsed id'; }
src: '//www.youtube.com/embed/%id%?autoplay=1' // URL that will be set as a source for iframe.
}
있다 = 상기 소스 코드를 생성 할 때 단순히 끝에서 자동 실행 = 1이 소요 스틱.
이를 변경하려면, 당신이 사용하는 특별한 iframe이 유튜브 패턴에 전달할 수 있습니다 정상으로 ID를 사용하여 삽입을 구축하고 스틱 수 있도록
iframe: {
patterns: {
youtube: {
src: '//www.youtube.com/embed/%id%?autoplay=1&rel=0&feature=player_detailpage'
}
}
}
을 여기에, 우리는 소스를 조정하여 rel 및 feature 매개 변수 (자동 재생과 함께)
이렇게하면 html 마크 업에서 url의 매개 변수를 그대로 두거나 끝에 v = 속성을 설정하여 추가 매개 변수를 추가 할 필요가 없을 때 삽입 URL을 작성합니다.
마지막 모습 뭔가처럼 될 수 있습니다
<div class="gallery-list">
<a class="popup-youtube mfp-iframe" href="https://www.youtube.com/watch?v=83UHRghhars">Click here</a>
<img class="mfp-image" href="http://domain/image.jpg" width="100" height="200" />
</div>
동영상 링크에 MFP - iframe이 클래스는 iframe이 기능을 사용 magnific을 알려줍니다
$('.gallery-list').magnificPopup({
delegate: 'a',
type: 'image',
gallery: {
enabled: true
},
iframe: {
patterns: {
youtube: {
src: '//www.youtube.com/embed/%id%?autoplay=1&rel=0'
}
}
}
});
그리고 당신의 요소가 될 수 있습니다.
위의 초기화 코드는 기본적으로 이미지를 사용하기 위해 magnific에게 말했지만 mfp-iframe css 클래스는 비디오의 우선 적용 코드를 무시합니다. 누군가가 동영상을 클릭하면 magnificent popup은 v = 매개 변수를 통해 동영상 ID를 가져온 다음 ID를 사용하고 추가 자동 재생 및 rel url 매개 변수를 추가하여 소스 코드를 작성해야합니다.
이것은 나를 위해 일했습니다. 감사합니다! –