The landingpage contains of three segments. Only one segment can be seen in full on either the desktop or mobile view. If I scroll down, I can move smoothly from one segment to the next one.
Segment (1)
On the top (header) it displays the logo with the line mohammedali.tv on the left. On the right top it displays Home, Booking, Contact.
The middle of the segment a video is being loaded in the background which can be changed using left or right arrow. In the center the thumbnail of the YT video is displayed with the layer title 'Explore'. When clicked on it, it opens a layer and displays the embedded YouTube video.
Below this video we have a location icon with a search box with the default text 'Where'. Next to the search box there is a drop down list {Flight, Hotel, Activity} and then a 'Go' button.
Depending what is typed in 'Where' which opens the location 20 common cities of the world and whether it is flight, hotel or activity, it opens a new window with a link. The links are managed in a XML file in the format.
Below it says 'Follow us' and the typical icons 'YouTube', 'Instagram', 'Twitter' and 'Facebook'
Note:
>> The 'Where?' is a text that appears in the text field. When the user clicks in the text field, the 'Where' disappears and the user can type the country name. When he types the country name, it matches with the XML file and auto populates (if there is a match). Before the text field there is a google location icon. Next to it there is a space and then the drop box with the pres elected value 'flight'. And the the 'Submit' button with the label 'Let's explore'
Below that there must be some hand space between this and the social media icons,
The social media links should be the same like that with the caption: Follow Us: https://mohammedali.tv/intro.html
The YouTube video is not just a direct embedded video. It is actually the thumbnail and when clicked, it opens the video in a new layer.
I can attach the code that you can use to implement the same logic.
he background of this page itself loads a video
The logic is like that:
In the background a video (*.mp4 or similar format) is loaded. Like this: http://therivo.com.au/ --> resource: https://unicorntears.dev/posts/how-to-implement-a-seamless-responsive-video-background-using-youtube-and-wordpress/
You can use a dummy mp4 file from here: https://pixabay.com/videos/
