YotuWP Plugin: Custom CSS

Video

YotuWP Plugin: Custom CSS

2 years ago

•

3 min read

Posted by:

Focus

Subscribe to newsletter

By subscribing you agree to with our Privacy Policy.

Go to Dashboard > Appearance > Customize and add this custom CSS.

LIGHT MODE CSS

/* YOTUWP CAROUSEL CSS - LIGHT MODE */

@media only screen
and (max-device-width: 1200px)
{
	div.yotu-lightbox .yotu-lightbox-overlay  {
		background: rgba(0,0,0,0)
	}}

@media only screen
and (min-device-width: 1200px)
{
	div.yotu-lightbox .yotu-lightbox-overlay  {
		background: rgba(0,0,0,0.75)
	}}


@media only screen
and (max-device-width: 1200px)
{
	div.yotu-lightbox .yotu-lightbox-body {
    position: absolute;
    top: 0%;
		max-height: 0vh;
	}}

	div.yotu-playlist {
	padding: 0px 0px !important;
}

.yotu-videos {
	padding: 0px 0px !important;
}

.yotuicon-close {
	display: none
}

@media only screen
and (min-device-width: 1200px)
{
div.yotu-wrapper-player {
	width: 75vw;
	height: auto-flow;
	overflow-x: visible
	}}

@media only screen
and (min-device-width: 1200px)
{
div.yotu-lightbox .yotu-lightbox-body {
    position: absolute;
    top: ;
		max-height: 100vh;
}
}

.yotu-thumb-169 .yotu-video-thumb-wrp>div, .yotu-thumb-169.yotu-thumbnails.owl-carousel .owl-item>div {
	border-radius: 3px
}

div.yotu-videos .yotu-video h3 {
	font-family: roboto;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.4em!important;
	padding-right: 10px;
	margin: 5px 0 0;
}

body div.yotu-videos .yotu-video .yotu-video-title {
	color: #000000!important;
	text-decoration: none;
}

div.yotu-videos .yotu-video h3
{
	display: block; /* Fallback for non-webkit */
  display: -webkit-box;
  height: 3em; /* Fallback for non-webkit, line-height * 2 */
  line-height: 1.5em;
  -webkit-line-clamp: 2; /* if you change this, make sure to change the fallback line-height and height */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}



/* (END) YOTUWP CAROUSEL CSS - LIGHT MODE */

DARK MODE CSS

/* YOTUWP CAROUSEL CSS - DARK MODE */


@media only screen
and (max-device-width: 1200px)
{
	div.yotu-lightbox .yotu-lightbox-overlay  {
		background: rgba(0,0,0,0)
	}}

@media only screen
and (min-device-width: 1200px)
{
	div.yotu-lightbox .yotu-lightbox-overlay  {
		background: rgba(0,0,0,0.75)
	}}


@media only screen
and (max-device-width: 1200px)
{
	div.yotu-lightbox .yotu-lightbox-body {
    position: absolute;
    top: 0%;
		max-height: 0vh;
	}}

	div.yotu-playlist {
	padding: 0px 0px !important;
}

.yotu-videos {
	padding: 0px 0px !important;
}

.yotuicon-close {
	display: none
}

@media only screen
and (min-device-width: 1200px)
{
div.yotu-wrapper-player {
	width: 75vw;
	height: auto-flow;
	overflow-x: visible
	}}

@media only screen
and (min-device-width: 1200px)
{
div.yotu-lightbox .yotu-lightbox-body {
    position: absolute;
    top: ;
		max-height: 100vh;
}
}

.yotu-thumb-169 .yotu-video-thumb-wrp>div, .yotu-thumb-169.yotu-thumbnails.owl-carousel .owl-item>div {
	border-radius: 3px
}

div.yotu-videos .yotu-video h3 {
	font-family: roboto;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.4em!important;
	padding-right: 10px;
	margin: 5px 0 0;
}

body div.yotu-videos .yotu-video .yotu-video-title {
	color: #FFFFFF!important;
	text-decoration: none;
}

div.yotu-videos .yotu-video h3
{
	display: block; /* Fallback for non-webkit */
  display: -webkit-box;
  height: 3em; /* Fallback for non-webkit, line-height * 2 */
  line-height: 1.5em;
  -webkit-line-clamp: 2; /* if you change this, make sure to change the fallback line-height and height */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* (END) YOTUWP CAROUSEL CSS - DARK MODE */

Effect

< 1 min read

Blur Effect CSS

Learn how this simple blur effect addition can transform your website’s visual appeal, creating a sleek and modern look that

Video

< 1 min read

How to Get Youtube API and Check Quotas

How to get Youtube API:Go to: https://console.cloud.google.com/apis/dashboard How to check Youtube API Quota:Go to: https://console.cloud.google.com/iam-admin/quotas

Single Post

2 min read

Hiding “Previous Post” Navigation in Elementor with Custom CSS

Hi, there! I’ll share some quick tips on how to change the appearance of article navigation on your Elementor website.

Image

< 1 min read

Crop Image To Ratio

To crop image based on ratio, on Elementor’s Image Widget add this CSS: 16:9 Landscape CSS 9:16 Portrait CSS

See How It Works

Create better websites, faster.

Download the Entire Library

Adaptative, neutrally designed components.

Video