How to add the 1.1.9 Video changes to your theme

January 20, 2023, 06:14:06 pm

The video embed code was updated in 1.1.9, as some of the supported providers no longer worked 100% properly.

In doing this support for tiktok videos was included and the CSS attempts to handle both portrait and landscape style videos. The old CSS code will work as is, but if you want to make the tweaks, here is what you need to do.

Replace the old CSS which should be like this in index.css

Code: (find) [Select]

/* Used by video embed JS when autolinking video links */
.elk_video {
	display: block;
	max-height: 480px;
	width: 640px;
	height: auto;
	border: 1px solid;
	border-top: 0;
}

.elk_video a img, .elk_video embed {
	display: block;
	margin: 0 auto;
}

.elk_videoheader {
	padding: 0 4px 0 6px;
	max-width: 98%;
	width: 630px;
	border: 1px solid;
}

.elk_previewvideo {
	max-width: 640px;
	height: auto;
}

Replace that with

Code: (replace) [Select]

/* Used by video embed JS when autolinking video links */
.elk_video {
	display: block;
	width: 640px;
	height: auto;
	max-height: 480px;
	border: 1px solid;
	border-top: 0;
}

.elk_video a img, .elk_video embed {
	display: block;
	width: 100%;
	max-height: 360px;
	margin: 0 auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.elk_videoheader {
	width: 640px;
	max-width: 100%;
	border: 1px solid;
}

.elk_videoheader > a {
	padding: 0 4px;
}

.elk_previewvideo {
	max-width: 640px;
	height: auto;
}

/* These deal with 9/16 videos (like tiktok) */
.elk_video.portrait {
	width: 100%;
	max-width: 480px;
	min-height: 480px;
	max-height: initial;
}

.elk_videoheader.portrait {
	width: 480px;
	margin: 0px 0 -18px 0;
}

There are enhancements to this CSS in the 2.0 code such as improved responsive sizing on the videos and side x side stacking on wide screens, you could also gab that CSS and its media queries if you want to explore.

Also tiktok videos are often (mostly) blocked by, well almost any blocking program. Even when not blocked they can be a bit flakey on some loads. So if they do not work be grateful and if they do, it is what it is