Question

airbnb的主页有一个＆＃34; play＆＃34;单击时触发全屏html视频的按钮。

如何创建一个触发自动全屏html视频的按钮/功能？

Answer 1

我查看了Airbnb主页，我看到了视频和你正在谈论的效果。你想要的是灯箱的“视频”版本。这实际上是一个非常简单的效果。你需要的是：

按钮。
div作为灯箱，在触发按钮的onclick事件后显示。
div将视频嵌入其中。
要显示的实际视频。
关闭灯箱的关闭按钮。

我在此codepen为您创建了一个简单版本。

您也可以使用下面的代码段进行检查。

$(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>

全屏视频触发器

1 个答案: