מודל פופ-אפ בשביל סרטון youtube בעזרת jQuery

מדריך זה מספק קוד לצד הסברים כיצד ליצור פופאפ של סרטון יוטיוב באתר. הקוד משתמש ב-jQuery וגם ב-Youtube API.

לחץ להדגמה:      Play

הטמ"ל של פופ-אפ וכפתור

סרטון היוטיוב יושב בתוך פופאפ. לחיצה על כפתור ה-Play גורמת להופעת הסרטון, ולחיצה על כפתור הסגירה גורמת להעלמות הפופאפ, ולעצירת הסרטון.

<div class="video-wrapper popup">
    <div class="close-popup close-video">×</div>
    <div class="popup-inner-wrapper">
        <div class="popup-inner">
             <script src="https://www.youtube.com/player_api"></script>
             <iframe id="ytplayer" 
                      width="640" 
                      height="360" 
                      src="https://www.youtube.com/embed/GmT-KtbjBng?enablejsapi=1&rel=0&showinfo=0&feature=player_detailpage&fs=1;&controls=2;&vq=hd1080&wmode=transparent" 
                      onload="videoLoaded()" 
                      frameborder="0" 
                      wmode="Opaque" 
                      allowfullscreen=""></iframe>
    	</div>
    </div>
</div>

סקריפט ה-Youtube API רץ לפני טעינת הסרטון.

הפרמטרים שהוספתי לקישור לסרטון עושים חלק גדול מהעבודה וחוסכים את הצורך בכתיבת קוד מסובך.

• enablejsapi=1  מאפשר שליטה בסרטון באמצעות Youtube API.
• rel=0  מונע הופעת המלצות לסרטונים נוספים כשהסרטון מסיים.
• showinfo=0  מסתיר את כותרת הסרטון ומידע על מעלה הסרטון.
• fs=1  מתיר את הצגת כפתור "עבור למסך מלא".
• controls=2  מציג את כפתורי השליטה בסרטונים.
• vq=hd1080  איכות הסרטון.

onload="videoLoaded()" מגדיר שטעינת הסרטון תקרא למתודה.

סקריפט jQuery + youtube API

המתודה videoLoaded רצה מיד לאחר טעינת הסרטון ומאפשרת את השימוש בנגן הסרטונים שמספק ה- Youtube API עבור הסרטון (var player).

לחיצה על הכפתור להסתרת הפופאפ גם מפסיקה את הסרטון באמצעות המתודהplayer.stopVideo(); שמספק ה-API. זו גם הסיבה שבגללה צריך את ה-API. כדי שנוכל להפסיק את נגינת הסרטון כשאנחנו בוחרים לסגור את הסרטון.

var iframe = $('#ytplayer');

var player;

function videoLoaded(){
    player = new YT.Player('ytplayer',{});
}
 
$("#play").on("click", function(){
    $("#video-popup-fade").show();
    $(".video-wrapper.popup").fadeIn();
})

$(".close-popup.close-video").on("click", function(){
    player.stopVideo();

    $("#video-popup-fade").hide();
    $(".video-wrapper.popup").fadeOut();
});

עיצוב CSS

קוד ה-CSS הוא ישר ולעניין. הבעיה היחידה היא כיצד למקם את הפופ-אפ בדיוק במרכז. לשם כך אני משתמש בעקרונות שאותם הסברתי ב מדריך CSS: יישור אלמנטים בדף בציר האנכי.

.video-wrapper.popup {
    padding-bottom:0;
    padding-top:0;
    height: auto;
    overflow: visible;
    border: 0;
}

.video-wrapper.popup {
    display:none;
    position:fixed;
    top:180px;
    right:50%;
    margin-right:-350px;
    z-index:1004;
}

.video-wrapper.popup .popup-inner-wrapper {
    position:relative;
    width:660px;
    height:380px;
    background-color: white;
    box-shadow: 1px 2px 2px rgba(170,170,170,0.7);
}

.video-wrapper.popup .popup-inner{
    position:relative;
    width:640px;
    height:360px;
    margin-right:10px;
    margin-top:10px;
    border:1px solid white;
    background-color:white;
}

.video-wrapper.popup #video{
    z-index:10004;
    position:absolute;
    top:10px;
    right:10px;
}

.video-wrapper.popup .popup-inner .close{
    position:absolute;
    top:0;
    right:0;
    text-align:center;
    cursor:pointer;
    font-family:sans-serif;
    display:block;
    height:30px;
    width:30px;
    border-radius:50%;
    background-color:#fff;
    z-index:1012;
    border:1px solid;
}

.video-wrapper .close-popup{
    width: 26px;
    height: 26px;
    border-radius:50%;
    cursor:pointer;
    background-color:#363F43;
    border:2px solid #fff;
    position:absolute;
    font-family:"Lucida Console", Monaco, monospace;
    color:#fff;
    z-index:1040;
    text-align:center;
    right: -10px;
    top: -0px;
    font-size: 24px;
}

.video-wrapper iframe{
    margin-top:10px;
}

#video-popup-fade{
    display:none;
    position:fixed;
    top: 0;
    left: 0; 
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.1);
    z-index: 1000;
    cursor: pointer;
    z-index: 999;
    cursor:pointer;
}

לכל מדריכי ה-jQuery

אהבתם? לא אהבתם? דרגו!

0 הצבעות, ממוצע 0 מתוך 5 כוכבים