[Share] How to make Video Block clickable

To make a Video Block clickable, you can use these options.

#A. Option 1: Add a clickable transparent image over Video

#1. You can add an Image Block with Transparent Image. 

If you can't design a transparent image, you can use any images (we will use code to make it transparent then).

#2. Next, add Link to Image

#3. Drag Image over Video

#4. Find Image Block ID.

In my example, it is: #block-yui_3_17_2_1_1732609379795_19276

#5. Use this code to Custom CSS box

#block-yui_3_17_2_1_1732609379795_19276 {
	opacity: 0;
}

#B. Option 2: Use JS code

Suppose you have 2 Video Blocks and you need to make both clickable.

#1. First, find ID of 2 Videos

In my example, it is: #block-yui_3_17_2_1_1732609379795_18503 and #block-0047174352b5fa64d8c4

#2. Add link to Video Caption

#3. Use this code to Custom CSS to hide Caption

#block-yui_3_17_2_1_1732609379795_18503, #block-0047174352b5fa64d8c4 {
  .video-caption {
    display: none;
  }
}

#4. Use this code to Code Injection Footer to make both videos clickable

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
  $(document).ready(function(){
    $(".video-block").click(function(){
        window.location=$(this).find(".video-caption a").attr("href"); 
        return false;
    });
});
</script>