Die Homepage von airbnb hat einen "Play" -Knopf, der beim Anklicken ein Fullscreen-HTML-Video auslöst.Fullscreen-Video-Trigger
Wie können Sie eine Schaltfläche/Funktion erstellen, die ein automatisches Vollbild-HTML-Video auslöst?
Ich habe die Airbnb-Homepage ausgecheckt und ich habe das Video und den Effekt gesehen, von dem du sprichst. Was Sie wollen, ist eine "Video" Version des Leuchtkastens. Es ist eigentlich ein ziemlich einfacher Effekt zu erreichen. Was Sie brauchen, ist:
Ein Knopf.
Ein div der Leuchtkasten sein, der nach dem onclick Ereignis der Schaltfläche ausgelöst wird.
A div um das Video zu verschachteln.
Ein aktuelles Video zu zeigen.
Eine Schließen-Schaltfläche, um den Leuchtkasten zu schließen.
Ich habe eine einfache Version für Sie in diesem codepen erstellt.
Sie können es auch mit dem folgenden Abschnitt auschecken.
$(document).ready(function() {
// When the button is clicked make the lightbox fade in in the span of 1 second, hide itself and start the video
$("#button").on("click", function() {
$("#lightbox").fadeIn(1000);
$(this).hide();
// A simple hack to start the video without using the YouTube api
var videoURL = $('#video').prop('src');
videoURL += "?autoplay=1";
$('#video').prop('src', videoURL);
});
// When the close button is clicked make the lightbox fade out in the span of 0.5 seconds and show the play button
$("#close-btn").on("click", function() {
$("#lightbox").fadeOut(500);
$("#button").show(250);
});
});#button {
/* Text */
font-size: 45px;
/* Dimensions */
width: 100px;
height: 100px;
/* Positioning */
position: fixed;
top: 50%;
left: 50%;
z-index: 2;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
/* The code above makes sure the video is
both vertically and horizontally centered
to the screen */
/* Styling */
background-color: rgba(0, 0, 0, 0.95);
border: 0; /* remove annoying grey border */
border-radius: 50%; /* make it a circle */
outline: none; /* Ditch the annoyning blue outline on click */
cursor: pointer;
box-shadow: 0px 0px 0px 2px rgba(0, 0, 0, 0.25);
/* ----- Transformations ----- */
-webkit-transform: scale(1, 1);
-moz-transform: scale(1, 1);
-ms-transform: scale(1, 1);
-o-transform: scale(1, 1);
transform: scale(1, 1);
/* ----- Transitions ----- */
-webkit-transition: transform .5s ease;
-moz-transition: transform .5s ease;
-ms-transition: transform .5s ease;
-o-transition: transform .5s ease;
transition: transform .5s ease;
}
#button:hover {
/* ----- Transformations ----- */
-webkit-transform: scale(1.2, 1.2);
-moz-transform: scale(1.2, 1.2);
-ms-transform: scale(1.2, 1.2);
-o-transform: scale(1.2, 1.2);
transform: scale(1.2, 1.2);
/* ----- Transitions ----- */
-webkit-transition: transform .5s ease;
-moz-transition: transform .5s ease;
-ms-transition: transform .5s ease;
-o-transition: transform .5s ease;
transition: transform .5s ease;
}
#button > i {
/* Text */
color: grey;
text-shadow: 1px 1px rgba(255, 255, 255, 0.2);
/* Make play sign 3d-ish */
/* Positioning */
position: relative;
margin-top: 4px;
margin-left: 6px;
/* ----- Transitions ----- */
-webkit-transition: color .5s ease;
-moz-transition: color .5s ease;
-ms-transition: color .5s ease;
-o-transition: color .5s ease;
transition: color .5s ease;
}
#button:hover > i {
/* Text */
color: white;
/* ----- Transitions ----- */
-webkit-transition: color .5s ease;
-moz-transition: color .5s ease;
-ms-transition: color .5s ease;
-o-transition: color .5s ease;
transition: color .5s ease;
/* When we hover on the button make the play sign white. */
}
#lightbox {
/* ----- Positioning ----- */
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1;
/* The code above makes sure that the
lightbox covers the entire page*/
/* ----- Visibility ----- */
display: none;
/* ----- Styling ----- */
background-color: rgba(0, 0, 0, 0.95);
/* Normally, most lightboxes do not use
a completely solid black, but with about
90-95% opacity so that the background is
somewhat visible */
}
#video-wrapper {
/* ----- Positioning ----- */
position: absolute;
top: 50%;
left: 50%;
z-index: 2;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
/* The code above makes sure the video is
both vertically and horizontally centered
to the screen */
/* ----- Styling ----- */
box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1);
/* The code above is used to add a little shadow to the video making blend in better */
}
#close-btn {
/* ----- Text ----- */
color: grey;
font-size: 25px;
/* ----- Positioning ----- */
position: fixed;
top: 3%;
right: 3%;
z-index: 2;
/* The code above is used to put the button on the upper right corner of the lightbox */
/* ----- Transformations ----- */
-webkit-transform: scale(1, 1);
-moz-transform: scale(1, 1);
-ms-transform: scale(1, 1);
-o-transform: scale(1, 1);
transform: scale(1, 1);
/* The code above is used to initialize the scale for the button so that it can be used in transitions */
/* ----- Transitions ----- */
-webkit-transition: transform .5s ease, color .5s ease;
-moz-transition: transform .5s ease, color .5s ease;
-ms-transition: transform .5s ease, color .5s ease;
-o-transition: transform .5s ease, color .5s ease;
transition: transform .5s ease, color .5s ease;
}
#close-btn:hover {
/* ----- Text ----- */
color: white;
/* ----- Styling ----- */
cursor: pointer;
/* ----- Transformations ----- */
-webkit-transform: scale(1.2, 1.2);
-moz-transform: scale(1.2, 1.2);
-ms-transform: scale(1.2, 1.2);
-o-transform: scale(1.2, 1.2);
transform: scale(1.2, 1.2);
/* ----- Transitions ----- */
-webkit-transition: transform .5s ease, color .5s ease;
-moz-transition: transform .5s ease, color .5s ease;
-ms-transition: transform .5s ease, color .5s ease;
-o-transition: transform .5s ease, color .5s ease;
transition: transform .5s ease, color .5s ease;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.2/css/font-awesome.min.css" rel="stylesheet" />
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<!--Requirements-->
<!--I use a font awesome icon as a close button.
Be sure to include in your file the latest version
of Font Awesome for it to work.
LINK:
https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css-->
<!--Also remember to include the latest version of jQuery
in order for the script to work
LINK: http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js-->
<button id="button"><i class="fa fa-play" aria-hidden="true"></i>
</button>
<div id="lightbox">
<i id="close-btn" class="fa fa-times"></i>
<div id="video-wrapper">
<iframe id="video" width="960" height="540" src="https://www.youtube.com/embed/lJfqK9bgIng" frameborder="0" allowfullscreen></iframe>
</div>
</div>
Können Sie wie aufwendig die ersten beiden Sätze Einfluss auf Ihre Frage? – James
@CajMulligan sollten Sie klarer sein, wenn Sie fragen? Zeigen Sie uns einen Screenshot von dem, was Sie meinen. Gib uns einige Details, damit wir dir helfen können. –
@AngelPolitis Entschuldigung für den vagen Wortlaut. Die Frage basiert auf der Funktionalität, die ich auf der Homepage von [airbnb] (https://www.airbnb.com/) gesehen habe. Ich möchte einfach eine Schaltfläche erstellen, die ein Fullscreen-HTML5-Video auslöst, wie auf der genannten Website zu sehen ist. –