How to create a clickable video button for product pages?

Store Design
1

I want to create a button for the FAQ page and product page of my site (impulse theme) that is the size of a standard button but when clicked plays a pop up video explaining a product.

Button highlights to a different color when you hover over it, has text saying Watch The Video. Then when you click on the button an embedded video pops up. I am not sure if the video would have to be hosted on the website. The example I saw did not have a link to YouTube.

I am not referring to a video that is already full screen as impulse and other themes have this but just a simple button that sits on the product page and can be clicked if someone wants to a watch a video to learn more.

Let me know if this is a simple task and I appreciate all of your help!

2

Hello @drmisco35 ,

This may require a little code technique, you can try to follow these steps:

Go to Online Store → Theme → Actions → Edit code

Screen Shot 2023-04-10 at 11.13.01.png
Screen Shot 2023-04-10 at 11.13.01.png1433×764 109 KB

Go to sections → main-product.liquid file

  1. Create a button in HTML:
  1. Add the following CSS to make the button change color when hovered over:
.popup-button {
  background-color: #222;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 12px 24px;
  font-size: 16px;
  cursor: pointer;
}

.popup-button:hover {
  background-color: #fff;
  color: #222;
  border: 2px solid #222;
}
  1. Add the following code to make the pop-up video work when the button is clicked:
  1. Add the following code to style the pop-up video:
.modal {
  position: fixed;
  z-index: 99999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal iframe {
  max-width: 800px;
  width: 100%;
  max-height: 80vh;
}

Save and test.

Hope this will help. Let we know if you need any further support.

Ali Reviews team.

3

hi,

Shall I add all the above 4 coding into the product liquid? and lastly i added the below coding to the product body.

Watch The Video

when hover the button, it will change the colour. But, when click on the button, it will land to the youtube page instead of pop up window. How can I set this up?