{% extends 'layout.html' %}

{% block content %}

.thumb {

position: relative;

display: inline-block;

display: flex;

justify-content: center;

align-items: center;

}

#customPlayer{

border-radius: 22px;

}

.thumb .play-button {

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

width: 64px;

height: 64px;

background-image: url('static/assets/images/play.png');

background-repeat: no-repeat;

background-size: contain;

cursor: pointer;

z-index: 999;

}

<!-- ***** Featured Start ***** -->

<div class="row">

<div class="col-lg-12">

<div class="feature-banner header-text">

<div class="row">

<div class="col-lg-10 mx-auto">

<div class="thumb">

<img id="customPlayer" src="{{ thumbnail }}" alt="Video Thumbnail">

<div class="play-button"></div>

</div>

</div>

</div>

</div>

</div>

</div>

<script>

const thumbContainer = document.querySelector('.thumb');

const playButton = thumbContainer.querySelector('.play-button');

playButton.addEventListener('click', () => {

thumbContainer.innerHTML = `<iframe id="customPlayer" width="800" height="450" src="https://www.youtube.com/embed/{{VIDEO_ID}}?autoplay=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>`;

});

</script>

<!-- ***** Featured End ***** -->

<!-- ***** Details Start ***** -->

<div class="game-details">

<div class="row">

<div class="col-lg-12">

<h2></h2>

</div>

<div class="col-lg-12">

<div class="content">

<div class="row">

<div class="col-lg-10 mx-auto">

<div class="left-info primary">

<div class="left ">

<h4>{{ topic }}</h4>

<span>{{ courseName}}</span>

</div>

<ul>

<li><i class="fa-brands fa-youtube" style="color: red;"></i><a href="{{video_link}}"> Watch on YouTube</a></li>

<li><i class="fa fa-check" style="color: green;"></i> Verified By CodeColts</li>

</ul>

</div>

</div>

<div class="col-lg-10 mx-auto">

<p style="text-align: justify;">CodeColts is an open-source project providing free coding video courses from various sources. <br> We don't own or profit from the videos. All videos are owned by their respective creators. Our purpose is purely educational. We attribute and link to the original content. If you're a video creator and find your content here without proper attribution or consent, contact us to rectify. <br><a href="https://github.com/codeIntrovert/codeColts/blob/v1.0.0/LEGAL.md" target="_blank" style="color: #007AFF;"> Read our full disclaimer for details ↗️</a>, which may change over time.

<br>Thank you for using CodeColts!</p>

</div>

<div class="col-lg-10 mx-auto">

<div class="main-border-button">

<a id="goBackButton">Return to Course</a>

</div>

<script>

document.getElementById("goBackButton").addEventListener("click", function() {

window.history.back();

});

</script>

</div>

</div>

</div>

</div>

</div>

</div>

<!-- ***** Details End ***** -->

{% endblock %}