.wrap-yp {
	position: relative;
    display: flex;
    width: 100%;
    height: 550px;
    border: 1px solid #eee;
    background: #F9F9F9;
    padding: 20px;
	margin: 10px 0;
}
.yp-player {
	position: relative;
	width: 70%;
	height: 70%;
}

.yp-player iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 510px;	
    border-radius: 5px;
    border: 2px solid #c0c0c0;	
}
.player-video {
	position: relative;
	top: 0;
	left: 0;
}

.yp-list {
    position: absolute;
    left: 70%;
    top: 0;
    margin-left: 10px;
    margin-top: 20px;
    margin-right: 0;
    padding-right: 20px;
    height: 520px;
    overflow: auto;
    max-height: 510px;
}

.yp-list img {
    border: 2px solid #777;
    border-radius: 5px;
	cursor: pointer;
	width: 100%;
    object-fit: cover;
    object-position: 50% 50%;	
}

.list-element {
    position: relative;
    margin-bottom: 15px;
    border: 1px solid #E0E0E0;
    padding: 10px 10px 8px 10px;
    background: #F2F2F2;
    color: #555;
    border-radius: 5px;
}

.position-detiles {
    padding-top: 5px;	
}

.play-yp {
    position: relative;	
}

.list-element .dashicons-controls-play {
	position: absolute;
	font-size: 80px;
	opacity: 0.4;
	color: #fff;
	left: 0; 
	right: 0; 
	top: 0;
	bottom: 0; 
	margin-left: auto; 
	margin-right: auto; 
	margin-top: auto; 
	margin-bottom: auto; 
	width: 100px;
	height: 80px;
	transform: none;
	pointer-events: none;
	z-index: 999;
}

img:hover > .dashicons-controls-play {
	color: red;
	
}


.yp-title, .yp-description {
	padding-bottom: 5px;
}

.yp-list img:hover {
    opacity: 0.9;
}

/* width */
.wrap-yp ::-webkit-scrollbar {
	width: 15px;
}

/* Track */
.wrap-yp ::-webkit-scrollbar-track {
	background: #C0C0C0;
	border-radius: 4px;
}

/* Handle */
.wrap-yp ::-webkit-scrollbar-thumb {
	background: #999; 
	border-radius: 4px;
	border: 1px solid #888;		
}

/* Handle on hover */
.wrap-yp ::-webkit-scrollbar-thumb:hover {
	background: #666; 
}

.ytp-endscreen-content{
	display: none !important;
	visibility: hidden !important;
}

@media screen and (max-width: 600px) { 
	.list-element .dashicons-controls-play,	
	.position-detiles {
		display: none;
	}

	.wrap-yp {
		display: block;
		height: 240px;
		padding: 0;
	}
	.list-element {
		margin-bottom: 0;	
	}

	.yp-player iframe {
		height: 200px;
		margin-top: 10px;
		margin-left: 5px;	
	}
	.yp-list {
		height: 200px;
		margin-top: 10px;
	}

	.yp-list img {
		height: auto;
	}
	.list-element {
		padding: 0;
	}
}