Activate the full-screen video mode

On the website airbnb, there is a "play" button on the homepage that, when clicked, activates a fullscreen HTML video.

Is it possible to design a button or function that can automatically trigger a full-screen HTML video?

javascriptcsshtml

Answer №1

After exploring the Airbnb website, I came across the video feature that matches what you described. It seems like you are looking for a lightbox with a video component. Achieving this effect is quite simple. Here's what you will need:

  1. A clickable button.

  2. A div to serve as the lightbox, which only appears after clicking the button.

  3. An additional div where the video will be embedded.

  4. The actual video content to display.

  5. A close button for shutting down the lightbox.

I have created a basic version of this setup for you on this codepen.

You can also experience it firsthand by using the code snippet provided below.

$(document).ready(function() {

  // Clicking the button fades in the lightbox in 1 second, hides the button, and starts playing the video
  $("#button").on("click", function() {
    $("#lightbox").fadeIn(1000);
    $(this).hide();

    // Quick hack to autoplay the video without the YouTube API
    var videoURL = $('#video').prop('src');
    videoURL += "?autoplay=1";
    $('#video').prop('src', videoURL);
  });

  // Clicking the close button fades out the lightbox in 0.5 seconds and shows 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%);
  
  /* Center the button vertically and horizontally on the screen */
  
  /* Styling */
  background-color: rgba(0, 0, 0, 0.95);
  border: 0; /* Remove default grey border */
  border-radius: 50%; /* Shape it into a circle */
  outline: none; /* Eliminate blue click outline */
  cursor: pointer;
  box-shadow: 0px 0px 0px 2px rgba(0, 0, 0, 0.25);
  
  /* Scale 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);
  
  /* Hover effects */
  -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 {
  /* Hover scaling */
  -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);
  
  /* Transform 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);
  
  /* Play sign positioning */
  position: relative;
  margin-top: 4px;
  margin-left: 6px;
  
  /* Transition effects */
  -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 change on hover */
  color: white;
  
  /* Transition settings */
  -webkit-transition: color .5s ease;
  -moz-transition: color .5s ease;
  -ms-transition: color .5s ease;
  -o-transition: color .5s ease;
  transition: color .5s ease;
  
  /* Make the play sign white on hover */
}

#lightbox {
  /* Positioning */
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
  
  /* Covers the entire page */
  
  /* Style */
  display: none;
  background-color: rgba(0, 0, 0, 0.95);
  
  /* Typical lightbox has around 90-95% opacity allowing some visibility behind it */
}

#video-wrapper {
  /* Centralize video */
  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%);
  
  /* Add shadow for better blend */
  box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1);
}

#close-btn {
  /* Button style */
  color: grey;
  font-size: 25px;
  
  /* Position */
  position: fixed;
  top: 3%;
  right: 3%;
  z-index: 2;
  
  /* Top-right corner placement */
  
  /* Initial scale setting for button transition */
  -webkit-transform: scale(1, 1);
  -moz-transform: scale(1, 1);
  -ms-transform: scale(1, 1);
  -o-transform: scale(1, 1);
  transform: scale(1, 1);
  
  /* Button transition effects */
  -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 change on hover */
  color: white;

  /* Visual cue for clickability */
  cursor: pointer;

  /* Scale-up on hover */
  -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);

  /* Hover 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>

<!--Dependencies-->

<!--Include latest Font Awesome CSS for the close button.
Get it here: https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css-->

<!--Make sure to include the most recent jQuery library
for the script functionality 
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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Handling HTTP request callbacks in Node JS using Node JS technology

Hey there! I'm currently working on making an HTTP request using the callback method, but I'm encountering an issue where I'm receiving a lot of information, but not the specific data I need: Request { domain: null, _events: { e ...

javascriptjsonnode.jshttp

Eliminate any HTML content using Jsoup while retaining the text lines

I am working with a String that contains e-mail content, and my goal is to eliminate all HTML coding from this String. This is the current code I have: public static String html2text(String html) { Document document = Jsoup.parse(html); document = ...

javahtmlregexjsoup

Adding content in real-time at the current cursor position within a Contenteditable element using Angular

I have a contenteditable div where I am facing an issue with pasting text. Whenever I try to paste some text into the div, it always gets pasted at the end. I am using ViewChild to access the reference of the contenteditable div and utilizing innerText to ...

javascriptangular

Is it true that DOM objects in JavaScript are considered objects?

I've been searching for an official answer to this question, but it seems there is some confusion. Some people consider DOM objects to be JS objects, while others argue that they are different entities. What is the correct answer? If you search on Sta ...

javascriptdom

What is the best way to automatically populate the date and time fields in PHP MySQL without manual input?

Is there a way to automatically populate these two input fields without any manual input? <input type="time" name="Time" id="Time" value="" /> I am looking for a solution to automatically fill the date and ti ...

javascriptphphtmlcssmysql

Swapping Out Models in Three.js: A Guide to Replacing Object3D Models

I'm attempting to swap out an object3D for a character model, while retaining all of its attributes like the position. var object = new THREE.Object3D( ); object = models.character[0].clone( ); object.position.set( 100, 230, 15 ); scene.add( object.sc ...

javascriptthree.js

What is the best way to set the first option in a mat-select to be

My approach to date selection involves using 3 mat-select components for day, month, and year. You can view a demo of this setup here. In an attempt to improve the code, I decided to set the initial options as null by modifying the following lines: allDat ...

javascriptangulartypescriptangular-material

Using JavaScript to select numbers at random from a predefined set to ensure that each number is chosen uniquely

Given an array arr[8,4,2,1,7,5,3,0] containing 8 elements, I am looking for a way to randomly select each number from the array without any repeats. The goal is to ensure that every number is picked exactly once. ...

javascript

Ways to minimize the left-hand sidebar?

Seeking a method to create a collapsible left side panel without affecting any other elements on the website. Preferably with a smooth sliding animation instead of an abrupt pop-in and out effect. Check out my website here to see the panel in question You ...

javascriptjqueryhtmlcsspanel

Guide on triggering a modal upon receiving a function response in React

I am looking for a way to trigger a function call within a response so that I can open a modal. Currently, I am utilizing Material UI for the modal functionality. Learn more about Modals here The process involves: Clicking on a button Sending a request ...

javascriptreactjsmaterial-ui

Another date selection option missing from the available choices

I stumbled upon this template: . I am facing an issue where the second div I added does not display the dates, months, and years when duplicated. Here's a snippet of the script: <div class="form-date"> <label for="birth_dat ...

htmlcssbootstrap-4

Tips for transferring information from controller JavaScript to view JavaScript within AngularJS

Currently, I am working on an angularJS application where I retrieve data from a REST service within the controller. The retrieved data is then passed to the view using $scope. However, I encountered an issue when trying to use this data in my in-page Java ...

javascriptangularjs

Create a layout with four columns, ensuring that each set of two columns has equal heights

Trying to create a container with two columns, each containing two columns of their own, all with equal heights using only CSS. The issue: the inner columns in their parent column do not align with the other inner columns in their respective parent column ...

htmlcss

Get the file that is attached for download

Is it possible to download attached files using Paperclip without relying on external libraries? I want to enable users to download the file immediately after uploading, before it reaches the backend. I managed to achieve this using file-saver But I&apo ...

javascriptreactjsdownload

How to efficiently load JSON data into an HTML form using fetch()

Is there a way to populate HTML form input fields with JSON data retrieved from an API? I have successfully displayed the data in a table using the code below, but I am struggling to make it work with a form. I have tried various approaches like <input& ...

javascripthtmljsonfetch-api

Tips on arranging a parent-child JSON array structure for easier parsing of JSON data

Having trouble parsing the following JSON output using jQuery. The issue arises when trying to parse the "pprice" value, resulting in an "undefined" error. { "response": [ {"instances": [ { "instanceID": "000001", "instanceOS": "FreeBSD", "instanceVersion ...

javascriptjqueryjson

Tips for looping through an HTML document using Python to extract information from Wikipedia

I am working on developing a tool to extract data from the Wikipedia API. Within an XML file named wikiepedia.html, I have several links that I want to parse through line by line in order to retrieve information which can then be formatted into JSON. The ...

pythonhtmljsonweb

Returning from a redirection - React Router

Presently, I have implemented a search bar that is connected to my search results through the following code snippet: render() { if (this.props.itemsFetchSuccess) { return ( <Redirect to={{ pathname: '/search', search: `?ite ...

javascriptreactjswebreact-routerreact-redux

Link not being properly contained within div element

Is there a way to ensure that the link stays contained within the div element and does not extend beyond it? It seems like the padding is causing an issue where the div considers the link to be as tall as the text. Any solutions or workarounds? Check out ...

htmlcss

Issues arise with the functionality of a basic Vue.js script

I've attempted to execute the following code, which is supposedly the simplest example of Vue.js, but it doesn't seem to be working: <div id="app"> {{ message }} </div> <script> var app = new Vue({ el: '#app', d ...

javascripthtmldata-bindingvue.js