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

Breakpoints

< 1 min read

Disable Zoom on Mobile Devices (native App Style)

Go to Dashboard > Elementor > Custom Code > Add New Code. This code will disable the abilty to zoom

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

Global

2 min read

Disabling the Device’s Default ‘Dark Mode’ in WordPress

If you are trying to convert your WordPress website to APK / AAB, you may need to disable the device’s

See How It Works

Create better websites, faster.

Download the Entire Library

Adaptative, neutrally designed components.

Video