Nスタ（ニュース番組）風のYoutubeテロップをHTML+CSSで作ってみた

<div class="video-wrapper">
 <div class="mainBox">
  <div class="tvHeader">
   <div class="headLeft">
    <div class="logo"><span class="respect">N</span><br>
     QTW</div>
    <div id="RealtimeClockArea2" class="nowTime">00:00</div>
   </div>
   <div class="headRight">
    <div class="headRight-innter">
     <div class="topicName">速報</div>
     <div class="topicDescription">くぅちゃん、シャンプー中</div>
     <div class="topicSubDescription">毛が無くても……</div>
    </div>
   </div>
  </div>
 </div>
 <div class="qoopl"></div>
 <div id="videoPlay01" data-property="{
			videoURL: 'https://youtu.be/P0qOt4LwmVc',
   useOnMovile: true,
			containment: '.qoopl',
   showControls: false,
			mute: true,
   loop: true,
   showYTLogo: false,
   stopMovieOnBlur: false,
   optimizeDisplay: false,
   autoPlay: true,
   YTLogo: false
   }"> </div>
</div>

<style>
#videoPlay01 {
 z-index: 1;
}
.inline-YTPlayer {
 max-width: 100% !important;
}
.mainBox {
 position: relative;
 width: 100%;
 height: auto;
 background-color: transparent;
 z-index: 100;
}
.mainBox img {
 width: 100%;
 opacity: .4;
}
.video-wrapper {
 width: 100%;
 height: auto;
 position: relative;
 max-width: 1400px;
 margin: 0 auto;
}
.tvHeader {
 position: relative;
}
.headLeft, .headRight .topicDescription {
 background-color: #ff8a50;
 color: #FFF;
 margin-top: 1.5vw;
}
.headLeft {
 position: absolute;
 display: flex;
 align-items: center;
 line-height: 1;
 padding: 0.5rem 0;
 border-radius: 0 1.8rem 1.8rem 0;
}
.headLeft .logo {
 margin-left: 1.8vw;
 font-size: 1.8vw;
 text-align: center;
}
.headLeft .nowTime {
 margin-left: 1vw;
 padding-right: 2vw;
 font-size: 4.8vw;
 font-family: 'Noto Sans', sans-serif;
}
.headRight {
 position: absolute;
 right: 0;
 display: flex;
 align-items: center;
 font-family: 'Noto Sans JP', sans-serif;
}
.headRight .topicDescription {
 font-size: 2.6vw;
 padding: 1.2vw 1.4vw 1.2vw 6vw;
}
.headRight-innter {
 position: relative;
}
.headRight-innter .topicName {
 display: block;
 border-radius: 50%;
 background: #FFF;
 color: #ff8a50;
 font-size: 3vw;
 font-weight: 800;
 position: absolute;
 left: -5.5vw;
 top: 0.2vw;
 padding: 1.7vw 1vw;
 background-clip: padding-box;
 border: 0.6vw solid rgba(255,255,255,0.5);
}
.topicSubDescription {
 text-align: center;
 color: #ff8a50;
 background: #FFF;
 border-radius: 0 0 0 2.5vw;
 width: 80%;
 float: right;
 font-size: 2.4vw;
 padding-bottom: 0.5vw;
}
 .qoopl {
  padding-bottom: 56%;
 }
 .respect {
  font-size: 140%;
  font-weight: bold;
 }
</style>

<script>
function set2fig(num) {
   // 桁数が1桁だったら先頭に0を加えて2桁に調整する
   var ret;
   if( num < 10 ) { ret = "0" + num; }
   else { ret = num; }
   return ret;
}
function showClock2() {
   var nowTime = new Date();
   var nowHour = set2fig( nowTime.getHours() );
   var nowMin  = set2fig( nowTime.getMinutes() );
   var nowSec  = set2fig( nowTime.getSeconds() );
   var msg = nowHour + ":" + nowMin;
   document.getElementById("RealtimeClockArea2").innerHTML = msg;
}
setInterval('showClock2()',1000);

$(function () {
 $('#videoPlay01').YTPlayer();
});
</script>