I just noticed, that the hero video and the fallback image do not have the same dimensions on the portfolio sliders. The Video is around twice the size of the image.
In the spaced metro page you see the video "hotel" playing while howering. If you klick on the video, it will switch to the fallback image that has the transition to the next page. The image is displayed in full. However, the video is cropped. (You only see about 50% of the full video file)
I attached an image that show the difference between video and image.
This does not only happens on the spaced-metro template, but also at the Harington Portfolio Grid for example.
Before I will refer this to our web designer I just want to clarify that the poster image (in our demo) is the very first frame of the video so basically at the very beginning they are the same Once the video starts playing you will see the camera following the woman therefore zooming. Which is the resolution you are testing with, anyway?
The screenshot I attached is within the first second recorded, so the camera zoom just started. If you take a look at the video file (or here http://clapat-themes.com/wordpress/harington/harington_portfolio/hotel-room/) you will notice that the image and the first frame of the video match. But it does not match on the spaced metro page or portfolio grid. The video has a larger size than the image and is cropped insider the Box.
I attached an additional image showing the differences between original video and the cropped version in metro grid.
Hi there,
I just noticed, that the hero video and the fallback image do not have the same dimensions on the portfolio sliders. The Video is around twice the size of the image.
For example this slider here: http://clapat-themes.com/wordpress/harington/
There is no video on your live demo landing page, but you can see it here with the video on the "hotel room" item: http://clapat-themes.com/wordpress/harington/spaced-metro/
Is there a way to get both, video and image, same sized?
Thanks in advance.
Hi Steph,
If we can clarify a bit your first comment:
the portfolio grid shortcode in the landing page has only 4 portfolio items (the firsts) therefore the video portfolio item does not show there.
In the Spaced Metro page
http://clapat-themes.com/wordpress/harington/spaced-metro/
it's displayed in the portfolio thumbnail that has specific size according to the layout (in this page is set to Wide)
Thank you.
Clapat Support
https://www.clapat.com/
Review Envato Item Support Policy
Hi there,
thanks for the reply. To clarify:
In the spaced metro page you see the video "hotel" playing while howering. If you klick on the video, it will switch to the fallback image that has the transition to the next page. The image is displayed in full. However, the video is cropped. (You only see about 50% of the full video file)
I attached an image that show the difference between video and image.
This does not only happens on the spaced-metro template, but also at the Harington Portfolio Grid for example.
Thank you.
Attached files: image_video.jpg
Before I will refer this to our web designer I just want to clarify that the poster image (in our demo) is the very first frame of the video so basically at the very beginning they are the same Once the video starts playing you will see the camera following the woman therefore zooming. Which is the resolution you are testing with, anyway?
Thank you.
Clapat Support
https://www.clapat.com/
Review Envato Item Support Policy
The screenshot I attached is within the first second recorded, so the camera zoom just started. If you take a look at the video file (or here http://clapat-themes.com/wordpress/harington/harington_portfolio/hotel-room/) you will notice that the image and the first frame of the video match. But it does not match on the spaced metro page or portfolio grid. The video has a larger size than the image and is cropped insider the Box.
I attached an additional image showing the differences between original video and the cropped version in metro grid.
Thank you.
Attached files: video_cropped.jpg
OK, let me escalate this to our web designer to get the best answer - appreciate your patience.
Thank you.
Clapat Support
https://www.clapat.com/
Review Envato Item Support Policy
Please add these styles in Aditional CSS:
.hero-video-wrapper video.bgvid, .content-video-wrapper video.bgvid {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: -1;
object-fit: cover;
width: 100%;
height: 100%;
}
Thank you.
Clapat Support
https://www.clapat.com/
Review Envato Item Support Policy