JSFiddle - React, Tailwind, and code Playground

by Esn024

HTML

<script src="https://geo.dailymotion.com/libs/player.js"></script>
<button id="loadVideo">Load embedded video</button>
<div id="fullscreen-container" style="width: 480px; height: 360px; overflow: hidden; transform-origin: center;">
  <div id="video"></div>
</div>

CSS

.player {
	display: flex;
	justify-content: center;
	width: 480px;
	height: 360px;
	background-color: black;
	position: relative;
}
.gradient {
    position: absolute;
    transition: opacity 200ms ease-in-out;
    pointer-events: none;
    background: linear-gradient(180deg,rgba(13,13,13,.6)0,rgba(13,13,13,.2) 20%,rgba(13,13,13,.2) 80%,rgba(13,13,13,.6) 100%);
    left: 0;
    bottom: 0;
    right: 0;
    top: 0;
}
.video_poster {
    height: 100%;
    width: 100%;
    position: absolute;
    background-color: #0d0d0d;
}
.video_poster_image {
    object-fit: cover;
    height: 100%;
    width: 100%;
}

.play_screen {
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.layout {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.layout_top, .layout_bottom {
    align-items: center;
    display: flex;
    flex-direction: row;
    height: 3rem;
    height: clamp(48px,3rem,51px);
    position: relative;
    z-index: 1;
    width: 100%;
}
.layout_top_left {
    height: 100%;
    margin: 0 1rem;
    min-width: 0;
}
.layout_title {
    display: block;
    margin-top: 12px;
}
.video_title_link {
    text-decoration: none;
}
.layout_title .title {
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: auto;
    height: 1.5rem;
    line-height: 1.5rem;
}
.video_owner {
    color: #fff;
    font-size: .875rem;
    line-height: 1.25rem;
}
.video_owner_link {
    color: #fff;
    text-decoration: none;
}

.layout_middle {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
}
.play_screen .layout_bottom {
    justify-content: center;
}
.button_watch_onsite {
    align-items: center;
    background: 0 0;
    border: 0;
    border-radius: 1.5rem;
    color: #fff;
    cursor: pointer;
    display: flex;
    font-weight: 400;
    height: 2.5rem;
    padding: 0...

JavaScript

const videoId = 'x7tgad0';

const videoDiv = document.getElementById('video');
const loadVideoButton = document.getElementById('loadVideo');


//https://stackoverflow.com/a/61335543/14926023
function secondsToTime(e){
    const h = Math.floor(e / 3600).toString().padStart(2,'0'),
          m = Math.floor(e % 3600 / 60).toString().padStart(2,'0'),
          s = Math.floor(e % 60).toString().padStart(2,'0');
    
    return h + ':' + m + ':' + s;
    //return `${h}:${m}:${s}`;
}

function loadDailymotionPreviewDiv(videoId, videoDiv) {
	fetch(`https://api.dailymotion.com/video/${videoId}?fields=thumbnail_360_url,title,duration,owner.username`)
  	.then(res => res.json())
		.then((json) => {
    	console.log({json});
			const imgSrc = json.thumbnail_360_url;
			const title = json.title;
			const time = secondsToTime(json.duration);
			const username = json['owner.username'];
		
			const overlayHtml = `
<div class="player">			
<div class="video_poster"><img class="video_poster_image" src="${imgSrc}" alt=""></div>
  <div class="gradient" style="opacity: 1;"></div>
  <div class="play_screen">
  <div class="play_screen_backdrop" role="button" tabindex="0"></div>
  <div class="layout">
    <div class="layout_top">
      <div class="layout_top_left">
        <div class="layout_title">
          <a class="video_title_link" href="https://www.dailymotion.com/video/${videoId}" target="_blank">
            <div class="title">${title}</div>
          </a>
        </div>
        <div class="layout_signature">
          <div class="video_owner">
            <a class="video_owner_link" href="https://www.dailymotion.com/${username}" target="_blank">${username}</a>
          </div>
        </div>
      </div>
    </div>
    <div class="layout_middle"></div>
    <div class="layout_bottom">
      <button class="button_watch_onsite" onclick="window.open('https://www.dailymotion.com/video/${videoId}','_blank')" type="button">
        <div class="button_watch_onsite-text">Watch on</div>
 ...