מודל פופ-אפ בשביל סרטון youtube בעזרת jQuery
מדריך זה מספק קוד לצד הסברים כיצד ליצור פופאפ של סרטון יוטיוב באתר. הקוד משתמש ב-jQuery וגם ב-Youtube API.
לחץ להדגמה:
הטמ"ל של פופ-אפ וכפתור
סרטון היוטיוב יושב בתוך פופאפ. לחיצה על כפתור ה-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;
}