I am currently using vanilla JS + HTML to render a different HTML file, (loadscreen.html) in index.html in a div element. The problem is that when the HTML is loaded, it's supposed to be full page, but only renders a tiny portion. Here's what it's supposed to look like:
But here's what the page actually renders:
Here is my JS+HTML code below for index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Test</title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
</head>
<body>
<div id="main"></div>
</body>
</html>
<script>
var state = "turnOn";
const setState = setTimeout(changeStateToLoaded, 10000);
var render = function (template, node) {
if (!node) return;
node.innerHTML = (typeof template === 'function' ? template() : template);
};
var renderTemplate = function () {
if (state === 'turnOn') {
template = '<object type="text/html" data="loadingscreen.html" ></object>';;
}
else if(state === 'loaded') {
template = '<h1>Hello world!</h1>';
}
return template;
};
function changeStateToLoaded() {
state = "loaded";
render(renderTemplate, document.querySelector('#main'));
}
render(renderTemplate, document.querySelector('#main'));
</script>
This is the code for loadingscreen.html (the HTML for the loading screen):
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<link rel="stylesheet" href="css/loading_screen/loadingscreen.css">
</head>
<body>
<div class="window">
<div class="logo">
<p class="top">Microsoft</p>
<p class="mid">Windows<span>97</span></p>
<p class="bottom">Professional</p>
</div>
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>
</body>
</html>
and the CSS for loadingscreen.html:
#import url('https://fonts.googleapis.com/css?family=Roboto:100,300,700');
body{
background: #000;
height: 100%;
font-family: 'Roboto', sans-serif;
color: #fff;
}
.window{
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%)
}
.container{
width: 150px;
height: 10px;
border: 2px solid #b2b2b2;
border-radius: 7px;
margin: 0 auto;
padding: 2px 1px;
overflow: hidden;
font-size: 0;
}
.box{
width: 9px;
height: 100%;
background: linear-gradient(to bottom, #2838c7 0%,#5979ef 17%,#869ef3 32%,#869ef3 45%,#5979ef 59%,#2838c7 100%);
display: inline-block;
margin-right: 2px;
animation: loader 2s infinite;
animation-timing-function: linear;
}
.logo{
width: 220px;
margin: 50px auto;
}
.logo p{
margin: 0;
padding: 0;
}
.top{
font-size: 16px;
font-weight: 300;
line-height: 16px;
}
.top:after{
content:"\00a9";
font-size: 10px;
position: relative;
top: -5px;
margin-left: 2px;
}
.mid{
font-size: 46px;
font-weight: 700;
line-height: 36px;
}
.mid span{
font-size: 22px;
display: inline-block;
vertical-align: top;
color: #FF6821;
margin-top: -8px;
}
.logo .bottom{
font-size: 30px;
font-weight: 300;
line-height: 30px;
margin-left: 5px;
}
#keyframes loader{
0%{
transform: translate(-30px);
}
100%{
transform: translate(150px);
}
}
How would I make the loadingscreen.html page render full page in the code?
Related
I tried using redoing it but it doesn't work all I want is to redCar to move left and right when using the arrow keys
there was a error once but it got solved by moving the below the body and can you tell me why is that????
var blueCar = document.getElementById("bluecar");
var redCar = document.getElementById("redcar");
var result = document.getElementById("result");
var game = document.getElementById("game");
var score = document.getElementById("score");
var counter = 0;
blueCar.addEventListener("animationiteration",function(){
var random = ((Math.floor(Math.random()*3))*130)
blueCar.style.left = random+"px";
counter++;
})
**next code is not working like it sappose to do**
redCar.addEventListener("keydown",function(e){
if(e.keyCode=="39")
{
var redCarleft = parseInt(window.getComputedStyle(redCar).getPropertyValue("left"))
if(redCarleft<260)
{
redCar.style.left = (redCarleft+130)+"px";
}
}; *this is the command of left key*
if(e.keyCode=="37")
{
var redCarleft = parseInt(window.getComputedStyle(redCar).getPropertyValue("left"))
if(redCarleft>0){
redCar.style.left = (redCarleft-130)+"px";
}
}
})
//this is my css which is working is fine
*{
margin: 0%;
padding: 0%;
}
body{
background-color: #34adff;
background-image: -webkit-linear-gradient(45deg,#7c7e80 50%,#323333 50%);
min-height: 800px;
}
#game{
height: 500px;
width: 390px;
background-color: 1rem solid black;
background-image:url(narutoR.png) ;
background-size: contain;
margin: 1rem auto;
overflow: hidden;
}
#bluecar{
height: 100px;
width: 130px;
background-color: #34adff;
position: relative;
top: 0px;
left: 0px;
text-align: center;
animation: move 1s linear infinite;
}
#bluecar img{
height: 100px;
}
#keyframes move {
0%{
top: 0px;
}
100%
{
top: 501px;
}
}
#redcar{
height: 100px;
width: 130px;
background-color:red;
position: relative;
top: 250px;
left: 130px;
text-align: center;
}
#redcar img{
height: 100px;
}
#result{
height: 200px;
width: 400px;
background-color: darkred;
margin:5rem ;
border: 2px solid white;
border-radius:20px ;
font-size: 30px;
text-align: center;
display:none;
}
#score{
font-size: 2.2rem;
color:goldenrod;
}
#btn{
padding: 0.5rem 1rem;
border: none;
border-radius: 20px;
background-color:black;
color:cyan;
font-size: 25px;
text-transform: uppercase;
margin-top: 10px;
cursor: pointer;
}
**this is working fine as i am able to access them perfectely**
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>car game</title>
<link rel="stylesheet" href="cargame.css">
</head>
<body>
<div>
<div id="game">
<div id="bluecar" > <img src="rasengan.jpeg" alt="blurcar"></div>
<div id="redcar" > <img src="pain.jpeg" alt="redcar"></div>
</div>
<div id="result">
<h1>GameOver</h1>
<p id="score"></p>
<button id="btn" onclick="location.reload()">Restart</button>
</div>
</div>
</body>
<script src="cargame.js"></script>
</html>
Add the keydown eventListener to the document.
document.addEventListener("keydown",function(e){
if(e.keyCode=="39")
{
var redCarleft = parseInt(window.getComputedStyle(redCar).getPropertyValue("left"))
if(redCarleft<260)
{
redCar.style.left = (redCarleft+130)+"px";
}
};
if(e.keyCode=="37")
{
var redCarleft = parseInt(window.getComputedStyle(redCar).getPropertyValue("left"))
if(redCarleft>0){
redCar.style.left = (redCarleft-130)+"px";
}
}
})
there is an api response in a website which can't be accessed outside this site requests. I want to access it response.
to do that I am trying iframe with code:-
html
<iframe id="myFrame" src="https://abrahamjuliot.github.io/creepjs" title="creepJS"></iframe>
css
visibility: hidden;
position: absolute;
left: 0; top: 0;
height:0; width:0;
border: none;
}
Javascript
console.log(fingerprint);
it is basically behind a loading screen
:-
full html
<!DOCTYPE HTML>
<html lang="en">
<head>
<script src="loading.js"></script>
<link rel="stylesheet" href="loading.css" type="text/css" media="all" />
<meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1">
<title>Device Verification</title>
</head>
<body>
<iframe id="myFrame" src="https://abrahamjuliot.github.io/creepjs" title="creepJS"></iframe>
<div class="contents">
<div class="load-icon center">
<span></span>
<span></span>
<span></span>
</div>
<h3>Verifying your Device for Security Reasons before accessing your account</h3><div class="text-area">
<p>This process is automatic. Your browser will redirect you to your requested content shortly.
</div>
</p>
<div class="load-text-area">
<p> We request you to allow us upto 5 seconds.</p>
</div>
</div>
<div class ="last">
<p>Verification id is <mark class="purple-dark">41E78vF6
</mark></p></div>
</body>
</html>
Full css
body{
margin: 0;
padding: 0;
}
html {
margin: 0;
padding: 0;
}
h3 {
padding-left: 2%;
padding-right: 2%;
padding-top: 8%;
color: black;
text-align: center;
font-family: roboto;
}
.contents {
margin-top: 30%;
}
.text-area {
text-align: center;
margin-left: 10%;
margin-right: 10%;
font-family: roboto;
margin-top: 4%;
}
.load-text-area{
margin-left: 3.5%;
font-family: roboto;
margin-top: 15%;
}
mark.purple-dark{
color: purple;
background-color: transparent;
}
.last{
margin-left: 3.5%;
font-family: roboto;
margin-top: 0.2%;
}
.load-icon {
height: 20px;
width: 100px;
}
.load-icon span {
position: absolute;
display: inline-block;
background: #222;
width: 20%;
height: 100%;
border-radius: 100px;
}
.load-icon span:nth-of-type(1) {
left: 0;
}
.load-icon span:nth-of-type(2) {
left: 40%;
}
.load-icon span:nth-of-type(3) {
right: 0;
}
/* Animation */
.load-icon span {
animation-name: loading;
animation-duration: 1.5s;
animation-iteration-count: infinite;
animation-fill-mode: both;
}
.load-icon span:nth-of-type(2) {
animation-delay: .2s;
}
.load-icon span:nth-of-type(3) {
animation-delay: .4s;
}
/* Keyframes */
#keyframes loading {
0% { opacity: 1; }
50% { opacity: 0; }
100% { opacity: 1; }
}
/* This isn't needed, just styling pen. */
.center {
position: absolute;
margin-left: 37%;
margin-top: 29%;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
iframe {
visibility: hidden;
position: absolute;
left: 0; top: 0;
height:0; width:0;
border: none;
}
and full js
var fingerprint = document.getElementById('myFrame').contentWindow.document.body
console.log(fingerprint);
I am getting 2 error
which is :-
in the image Dom exception
and 2nd is
iframe logging error ' can't read property 'contentWindow' of null
my current goal is to get json api response:-
The api response I want to Capture and put it in a file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Preview Testing</title>
</head>
<body>
<style>
.buttonDownload {
display: inline-block;
position: relative;
padding: 10px 25px;
background-color: #1d71ff;
color: white;
font-family: sans-serif;
text-decoration: none;
font-size: 0.9em;
text-align: center;
text-indent: 15px;
margin: 2px;
border-radius: 12px;
align-items: center;
}
.down-button{
width: 100%;
text-align: center;
}
.buttonDownload:hover {
background-color: #333;
color: white;
}
.buttonDownload:before, .buttonDownload:after {
content: ' ';
display: block;
position: absolute;
left: 15px;
top: 52%;
}
/* Download box shape */
.buttonDownload:before {
width: 15px;
height: 2px;
border-style: solid;
border-width: 0 2px 2px;
}
/* Download arrow shape */
.buttonDownload:after {
width: 0px;
height: 0px;
margin-left: 3px;
margin-top: -7px;
border-style: solid;
border-width: 4px 4px 0 4px;
border-color: transparent;
border-top-color: inherit;
animation: downloadArrow 2s linear infinite;
animation-play-state: paused;
}
.buttonDownload:hover:before {
border-color: #4CC713;
}
.buttonDownload:hover:after {
border-top-color: #4CC713;
animation-play-state: running;
}
.milkparagraph{
color: #FF4500;
font-size: 19px;
margin: 15px;
}
.milkdownbox{
border: 2px solid #365194;
padding: 0px 5% 7px 2%;
border-radius: 12px;
margin: 17px 0% 20px;
width: fit-content;
}
/* keyframes for the download icon anim */
#keyframes downloadArrow {
/* 0% and 0.001% keyframes used as a hackish way of having the button frozen on a nice looking frame by default */
0% {
margin-top: -7px;
opacity: 1;
}
0.001% {
margin-top: -15px;
opacity: 0;
}
50% {
opacity: 1;
}
100% {
margin-top: 0;
opacity: 0;
}
}
</style>
<div class="syltp">
<script type="text/javascript">
$(function(){
$('#button').click(function(){
if(!$('#iframe').length) {
$('#iframeHolder').html('<iframe id="iframe" src="https://drive.google.com/file/d/1GEsC2NXwLjvV4N2JCPqAqAxqMEt3uro0/preview" width="700" height="400" style="border: 1px solid black;"></iframe>');
}
});
});
</script>
<h4> <span style="font-family: 'Open Sans';"><i aria-hidden="true" class="fa fa-sticky-note"></i>Preview without jquery</span></h4>
<div class="down-button" id="button"><b class="buttonDownload">PREVIEW</b></div>
<br />
<div id="iframeHolder"></div>
</div>
</body>
</html>
How to open iframe only on when the button is clicked without using jquery <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js' type='text/javascript'></script>
here when we open a website the iframe should not load it should load only when the button is clicked
My present code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Preview Testing</title>
</head>
<body>
<style>
.buttonDownload {
display: inline-block;
position: relative;
padding: 10px 25px;
background-color: #1d71ff;
color: white;
font-family: sans-serif;
text-decoration: none;
font-size: 0.9em;
text-align: center;
text-indent: 15px;
margin: 2px;
border-radius: 12px;
align-items: center;
}
.down-button{
width: 100%;
text-align: center;
}
.buttonDownload:hover {
background-color: #333;
color: white;
}
.buttonDownload:before, .buttonDownload:after {
content: ' ';
display: block;
position: absolute;
left: 15px;
top: 52%;
}
/* Download box shape */
.buttonDownload:before {
width: 15px;
height: 2px;
border-style: solid;
border-width: 0 2px 2px;
}
/* Download arrow shape */
.buttonDownload:after {
width: 0px;
height: 0px;
margin-left: 3px;
margin-top: -7px;
border-style: solid;
border-width: 4px 4px 0 4px;
border-color: transparent;
border-top-color: inherit;
animation: downloadArrow 2s linear infinite;
animation-play-state: paused;
}
.buttonDownload:hover:before {
border-color: #4CC713;
}
.buttonDownload:hover:after {
border-top-color: #4CC713;
animation-play-state: running;
}
.milkparagraph{
color: #FF4500;
font-size: 19px;
margin: 15px;
}
.milkdownbox{
border: 2px solid #365194;
padding: 0px 5% 7px 2%;
border-radius: 12px;
margin: 17px 0% 20px;
width: fit-content;
}
/* keyframes for the download icon anim */
#keyframes downloadArrow {
/* 0% and 0.001% keyframes used as a hackish way of having the button frozen on a nice looking frame by default */
0% {
margin-top: -7px;
opacity: 1;
}
0.001% {
margin-top: -15px;
opacity: 0;
}
50% {
opacity: 1;
}
100% {
margin-top: 0;
opacity: 0;
}
}
</style>
<div class="syltp">
<script type="text/javascript">
$(function(){
$('#button').click(function(){
if(!$('#iframe').length) {
$('#iframeHolder').html('<iframe id="iframe" src="https://drive.google.com/file/d/1GEsC2NXwLjvV4N2JCPqAqAxqMEt3uro0/preview" width="700" height="400" style="border: 1px solid black;"></iframe>');
}
});
});
</script>
<h4> <span style="font-family: 'Open Sans';"><i aria-hidden="true" class="fa fa-sticky-note"></i>Preview without jquery</span></h4>
<div class="down-button" id="button"><b class="buttonDownload">PREVIEW</b></div>
<br />
<div id="iframeHolder"></div>
</div>
</body>
</html>
it is my present code if I add the above-mentioned jquery its works fine but here I removed it now it's not working
so I want to work it without jquery
That sticky sidebar should auto-scroll with the main content but when I used to frame the sidebar not scrolling down. It also block my comment frame
Check this, Is this what do you need?
const btn = document.querySelector("button.openIframe");
const frame = document.getElementById("frame");
btn.addEventListener("click", toggleIframe);
function toggleIframe(){
var src = "https://www.jqueryscript.net/";
frame.classList.toggle("d-none");
btn.classList.toggle("opened");
if(btn.classList.contains("opened")){
btn.innerHTML = "Close IFrame";
src = prompt("Enter a Source :", "https://www.jqueryscript.net/");
}
else{
btn.innerHTML = "Open IFrame";
}
frame.src = src;
}
.d-none{ display:none; }
<button class="openIframe">Open IFrame</button>
<iframe id=frame class="d-none" width="100%" height="60%">
</iframe>
Or Same in a Better Way ( Update )
const btn = document.querySelector("#load");
const src = document.querySelector("#src");
const frame = document.querySelector("#frame");
btn.addEventListener("click", toggleFrame);
function toggleFrame(){
frame.src = "about:blank";
if(src.value !== null){
src.classList.toggle("d-none");
btn.classList.toggle("opened");
frame.src = src.value;
frame.classList.toggle("d-none");
if(btn.classList.contains("opened"))
btn.innerHTML = "Close";
else
btn.innerHTML = "Load";
}
}
.d-none{ display:none; }
<input id=src placeholder="Enter a SRC" value="https://www.jqueryscript.net/"><button id=load>Load</button>
<iframe id=frame class=d-none width="100%"></iframe>
iFrame
I'm trying to create that every time that the image is clicked, it will decrease in size until it completely disappears. But I can't do this, help me!
HTML code:
<html lang="en" dir="ltr">
<head>
<link rel="stylesheet" href="main.css">
<meta charset="utf-8">
<title>Stupid Project</title>
</head>
<body>
<header class="header-top">
<h1>Shrink the image</h1>
</header>
<img src="D:\MATEUS\Programação\Stupid project\images\levi.png" alt="Levi" id="image">
</body>
</html>
<script type="main/javascript" src="jquery-3.3.1.js"></script>
CSS code:
#import "variables.css";
#import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght#300&display=swap');
*
{
margin: 0%;
font-family: 'Ubuntu', sans-serif;
background-color: var(--body-color);
}
.header-top
{
background-color: var(--body-color);
height: 49px;
}
.header-top > h1
{
color: white;
display: inline-block;
vertical-align: top;
margin-left: 10px 10px;
}
#image
{
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
margin-top: 90px;
border-radius: 20px;
}
Assuming you want to scale the image down in size on each click we can do this:
set the inital scale of the image to 1 (through a CSS variable --scale)
set up an event listener on the image
when the image is clicked read the current value of --scale, decrease it by 0.1, say, (as long as it hasn't already hit 0)
<html lang="en" dir="ltr">
<head>
<link rel="stylesheet" href="main.css">
<meta charset="utf-8">
<title>Stupid Project</title><style>
*
{
margin: 0%;
font-family: 'Ubuntu', sans-serif;
background-color: var(--body-color);
}
.header-top
{
background-color: var(--body-color);
height: 49px;
}
.header-top > h1
{
color: white;
display: inline-block;
vertical-align: top;
margin-left: 10px 10px;
}
#image
{
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
margin-top: 90px;
border-radius: 20px;
transform: scale(var(--scale));
}
</style>
</head>
<body>
<header class="header-top">
<h1>Shrink the image</h1>
</header>
<img src="https://picsum.photos/id/1016/1024/768" alt="test picture" id="image">
<script>
const image = document.getElementById("image");
image.style.setProperty('--scale', 1);
image.addEventListener("click", function () {
const curScale = image.style.getPropertyValue('--scale');
if (curScale > 0) {image.style.setProperty('--scale', curScale - 0.1); }
});
</script>
</body>
</html>
I found the solution to the problem, here's the example code:
HTML:
<button type="button" id="button" onclick="zoomout()">Click Me!</button>
<img src="https://images.pexels.com/photos/1108099/pexels-photo-1108099.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" id="image">
CSS:
#image
{
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
margin-top: 0px; /* 90px */
margin-bottom: 10px;
border-radius: 20px;
transition: all 1s;
}
#button
{
color: white;
margin-left: 570px;
margin-top: 39px;
margin-bottom: 0%;
padding: 15px 32px;
background-color: var(--button-color);
}
JavaScript:
function zoomout() {
var GFG = document.getElementById("image");
var currWidth = GFG.clientWidth;
GFG.style.width = (currWidth - 100) + "px"
}
You can just reduce the image width one by one (or with whatever rate you wish), and to visualize this change have some transition set on the image.
const img = document.querySelector("img");
const imgWidth = getComputedStyle(img, null).getPropertyValue('width')
document.querySelector("button").addEventListener("click", () => {
for (let i = parseInt(imgWidth); i >= 0; i--) {
img.style.width = `${i}px`
}
})
img {
display: block;
width: 200px;
transition: all 1s;
}
button {
margin-bottom: 5px;
}
<button>Click</button>
<img src="https://images.unsplash.com/photo-1618141411216-96de9f2bd309?ixid=MXwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyN3x8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" />
Sample Design -i want to create the video carousel with prev and next arrow slides along with vertical carousel thumbnail slides, I can able to create the video with thumbnail, but couldn't find the option for prev and next arrow. Please help me out.Sample code here.
Thanks in advance,
.template-container{
width: 100%;
height: 100%;
display: block;
position: relative;
margin: 0;
/*background-color: #1a1a1a;*/
overflow-y: hidden;
}
.video-js {
height: 430px;
width: 710px;
float: left;
margin-right: 50px;
}
.myplayer {
width: 70%;
position: relative;
}
.playlist-wrapper {
width: 31%;
height: 100%;
overflow-x: scroll;
}
.vjs-playlist .vjs-playlist-item {
min-height: 130px;
border-bottom: 1px solid #ccc;
margin-bottom: 5px;
}
.vjs-playlist-item.vjs-selected {
background: rgb(89, 44, 54);
}
.vjs-mouse.vjs-playlist .vjs-playlist-description {
white-space: normal;
min-height: 99px;
}
.vjs-mouse.vjs-playlist .vjs-playlist-thumbnail {
height: 68px;
font-size: 13px;
margin-right: 17px;
width: 121px;
}
.vjs-mouse.vjs-playlist {
color: #000000; /* darker blue */
background-color: #fff; /* gray */
}
.vjs-mouse.vjs-playlist .vjs-playlist-description {
color: #466675; /* darker blue */
}
li.vjs-playlist-item {
background-color: #ffffff; /* lighter blue */
}
li.vjs-playlist-item.vjs-selected {
background-color: #FAC8BF; /* pink */
}
/*PLuggin Customiozed code*/
.vjs-playlist{
font-family:"CernLight", Helvetica, Arial,Serif;
}
.vjs-playlist .vjs-selected, .vjs-playlist.vjs-mouse .vjs-selected {
background-color: #e5e5e5;
}
.vjs-mouse.vjs-playlist .vjs-playlist-title-container{
text-shadow: none;
}
.vjs-mouse.vjs-playlist .vjs-selected .vjs-playlist-thumbnail img {
opacity: 1;
}
.vjs-playlist img, .vjs-mouse.vjs-playlist .vjs-selected .vjs-playlist-thumbnail img {
margin-left: 12px;
margin-top: 40px;
}
.vjs-playlist img {
min-height: 77px;
}
.vjs-playlist-title-container{
top: 0px;
}
.vjs-playlist .vjs-playlist-name{
font-size: 18px;
}
.vjs-playlist-duration, .vjs-mouse.vjs-playlist .vjs-up-next .vjs-up-next-text{
display: none;
}
.vjs-mouse.vjs-playlist .vjs-playlist-thumbnail .vjs-playlist-now-playing-text{
top: 40px;
left: 12px
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Video Carousel</title>
<!-- Bootstrap Core CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="css/bootstrap.css" type="text/css">
<!-- Custom CSS -->
<link rel="stylesheet" type="text/css" href="css/videojs-bc-playlist-ui.css">
<link rel="stylesheet" href="css/hi-videocarousel.css" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<style>
.template-container{
width: 100%;
height: 100%;
display: block;
position: relative;
margin: 0;
/*background-color: #1a1a1a;*/
overflow-y: hidden;
}
.video-js {
height: 430px;
width: 710px;
float: left;
margin-right: 50px;
}
.myplayer {
width: 70%;
position: relative;
}
.playlist-wrapper {
width: 31%;
height: 100%;
overflow-x: scroll;
}
.vjs-playlist .vjs-playlist-item {
min-height: 130px;
border-bottom: 1px solid #ccc;
margin-bottom: 5px;
}
.vjs-playlist-item.vjs-selected {
background: rgb(89, 44, 54);
}
.vjs-mouse.vjs-playlist .vjs-playlist-description {
white-space: normal;
min-height: 99px;
}
.vjs-mouse.vjs-playlist .vjs-playlist-thumbnail {
height: 68px;
font-size: 13px;
margin-right: 17px;
width: 121px;
}
.vjs-mouse.vjs-playlist {
color: #000000; /* darker blue */
background-color: #fff; /* gray */
}
.vjs-mouse.vjs-playlist .vjs-playlist-description {
color: #466675; /* darker blue */
}
li.vjs-playlist-item {
background-color: #ffffff; /* lighter blue */
}
li.vjs-playlist-item.vjs-selected {
background-color: #FAC8BF; /* pink */
}
/*PLuggin Customiozed code*/
.vjs-playlist{
font-family:"CernLight", Helvetica, Arial,Serif;
}
.vjs-playlist .vjs-selected, .vjs-playlist.vjs-mouse .vjs-selected {
background-color: #e5e5e5;
}
.vjs-mouse.vjs-playlist .vjs-playlist-title-container{
text-shadow: none;
}
.vjs-mouse.vjs-playlist .vjs-selected .vjs-playlist-thumbnail img {
opacity: 1;
}
.vjs-playlist img, .vjs-mouse.vjs-playlist .vjs-selected .vjs-playlist-thumbnail img {
margin-left: 12px;
margin-top: 40px;
}
.vjs-playlist img {
min-height: 77px;
}
.vjs-playlist-title-container{
top: 0px;
}
.vjs-playlist .vjs-playlist-name{
font-size: 18px;
}
.vjs-playlist-duration, .vjs-mouse.vjs-playlist .vjs-up-next .vjs-up-next-text{
display: none;
}
.vjs-mouse.vjs-playlist .vjs-playlist-thumbnail .vjs-playlist-now-playing-text{
top: 40px;
left: 12px
}
</style>
</head>
<body>
<section>
<div class="template-container" style="background-color: ">
<div class="container">
<div class="col-lg-12 col-md-12 col-sm-12">
<div class="template-container">
<!-- ###################Modal popup Code to implement in the componenet starts Here-->
<div class="myplayer">
<h2 class="text-center">Video</h2>
<div id="carousel-outer-container">
<div id="feature-carousel-container" class="well well-small">
<div id="feature-carousel" class="carousel"></div>
<div id="carousel-left">
<img src="http://solutions.brightcove.com/bcls/scripts/jQuery-Feature-Carousel/images/arrow-left.png" />
</div>
<div id="carousel-right">
<img src="http://solutions.brightcove.com/bcls/scripts/jQuery-Feature-Carousel/images/arrow-right.png" />
</div>
</div>
</div>
<video id="myPlayerID"
data-playlist-id="5455901760001"
data-account="1507807800001"
data-player="SyMOsyA-W"
data-embed="default"
data-application-id
class="video-js"
controls></video>
<script src="https://players.brightcove.net/1507807800001/SyMOsyA-W_default/index.min.js"></script>
<script type="text/javascript">
videojs('myPlayerID').ready(function(){
var myPlayer = this;
myPlayer.playlist.repeat(true);
console.log('myPlayer.repeat()',myPlayer.playlist.repeat());
});
</script>
</div>
<div class="playlist-wrapper">
<h4>Other Videos</h4>
<ol class="vjs-playlist vjs-csspointerevents vjs-mouse"></ol>
</div>
<!-- ###################Modal popup Code Ends Here-->
</div>
</div>
</div>
</div>
</section>
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Prabhu Shanmugamenter code here