Jump to content

KVS 5.5.0 and vertical screenshots issue in old projects


Tech Support
 Share

Recommended Posts

We found that there is an issue that may affect sites in the following situation:

  • This issue only happens with vertical videos.
  • This issue only happens when your theme is limiting access to some videos (e.g. signup to watch a video).

Vertical video screenshot will be distorted in this case:

vertical_video_distorted.png.d0d695f0aa0bf10a138af8510fa7424b.png

 

Unfortunately we can't put a fix into update, because the fix affects theme CSS which cannot be updated together with KVS.

Therefore if this issue affects your project, you will need to manually put this fix into your theme CSS file. Common themes where this could be an issue are: KVS Default Theme and Paysite Theme 1.

1) For KVS Default Theme you need to modify one of these file directly on disk (or FTP), change -white if your theme color is light and choose -metal if you theme color is dark:

/static/styles/all-responsive-white.css
/static/styles/all-responsive-metal.css

Find this style:

.block-video .no-player img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0.2;
}

And add object-fit: contain; into it:

.block-video .no-player img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0.2;
  object-fit: contain;
}

 

2) For Paysite Theme 1 you need to modify one of these file directly on disk (or FTP), change all.css if your theme color is light and choose all-dark.css if you theme color is dark:

/static/styles/all.css
/static/styles/all-dark.css

Find this style:

.media-container__join__img {
  position: absolute;
  top: 0;
  left: 0;
  width:100%;
  height:100%;
}

And add object-fit: contain; into it:

.media-container__join__img {
  position: absolute;
  top: 0;
  left: 0;
  width:100%;
  height:100%;
  object-fit: contain;
}

 

As a result here is how the fixed version looks like:

vertical_video_fixed.png.6c5c59b620f2db449364ffb23425911c.png

 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...