YotuWP Plugin: Custom CSS

Video

YotuWP Plugin: Custom CSS

1 year 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 */

Video

< 1 min read

How to Make Play Icon on Image Overlay Smaller (Elementor Video Playlist Widget)

If you activate the image overlay, there is an option to show play icon. And the default play icon for

Search Results

< 1 min read

Search Result Custom Order

To add this code, go to Dashboard > Appearance > Theme File Editor and add one of these codes at

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

See How It Works

Create better websites, faster.

Download the Entire Library

Adaptative, neutrally designed components.

Video