Add an exit/close button on the youtube video in the home page #24 Resolved #26
Conversation
✨ Update: Cleaned imports
… css styling for home page for close btn
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
Hello there, Thank you for your contribution and for pointing out some of those responsiveness issues. Yes, you can go ahead and add some of the issues that you may want to work on. I am looking forward to your continued contribution for sure. Cheers 😃 |
src/pages/home/Home.jsx
Outdated
| <div className="responsive-video"> | ||
| <ReactPlayer url="https://www.youtube.com/watch?v=Gg4wtsWgw5k" controls={true} playsinline={true}/> | ||
| <ReactPlayer url="https://www.youtube.com/watch?v=Gg4wtsWgw5k" controls={true} playsinline={true} /> | ||
| <button type="button" className="btn-close mx-2" aria-label="Close" onClick={handleWatchVideo}></button> |
There was a problem hiding this comment.
Could you style this close button a little bit?
There was a problem hiding this comment.
Also, the services cards below the video tend to hoover over the video in medium and large screens which is not good UX. If possible, could you make time to work on that too?
There was a problem hiding this comment.
Also, the services cards below the video tend to hoover over the video in medium and large screens which is not good UX. If possible, could you make time to work on that too?
Sure thing, on it for both the styling and fixing the hovering 👌
…p up video div to prevent overlapping hover cards
|
Hey @waynemorphic! Just updated the styling of the close button to match the website's style, hope you like this better. I updated the z-index of div also to avoid the hover cards going over the video as stated.. not sure if you want a full page div layover to prevent any other clicks or anything else of that sort from happening. I did see a lot of styling that would prevent that but I'm down to work on it. If you find this satisfactory, let me know or any further changes! Thanks! 😊 |
|
Hello @alvarotorrestx ..Just made a few styling changes for the button. Going by the background color of the other buttons, the exit button was kinda off so i have simply added an Icon and resized the video in smaller devices. I think it looks better now. Thank you for your contribution 👏 So, at the moment, I am working on integrating an admin dashboard with a back end so that for every booking, the admin is able to receive bookings in real time on the dashboard. Regardless, kindly update me on what you are working on based on the issues you raised yesterday and the current changes. |
Hi there,
Hope you don't mind me contributing to your project, it seemed fun and I liked the layout of your project.
I went ahead and added the functionality of a close button for the video and updated the media query style for mobile also. Another thing I added was when the video is visible, I changed "Watch Now" to "Close Now" and it updates when the video is visible... if you'd like this to be returned to how it was, I can fix it back! It will also close the video if clicked again. Furthermore, the video is closable by clicking outside the div.
I did want to mention there are a few layout flaws on different screen sizes, there are many overflows causing an x axis scroll. Also in smaller screens the video doesn't show 100% since it's being given a set width. I'm not sure if you'd be ok with me adding issues...
Hope I can continue to contribute, these are a few things I noticed!
Thank you! 😊