I was assigned a task to make a portfolio item for Symagic. The challenge was that they needed the feature image to play a video instead. A featured image represents the contents, mood, or theme of a post or page. Posts and pages can have a single featured image, which many themes and tools can use to enhance the presentation of your site. In this task, I had to find a solution to replace the featured image with something like a featured video or replace the image with an HTML field so that I can insert the HTML code for the video player with the correct video.
One interesting thing that helped solving the challenge was the fact that when uploading an image in the theme, I have the option to add the video URL, so basically clicking the image should trigger the video to play. So far that was the solution. The next challenge was to add a play video icon to that specific portfolio item to play the video by clicking it. The CSS code below does this action:
.page-template-template-portfolio-list article .pswp-video.project-zoom span:before {
content: "\f003";
}
.page-template-template-portfolio-list article .rollover-content{
display: flex;
justify-content: center;
}