Added youtube video previews to project thumbnail

jahir-raihan · Dec 4, 2023 · 83d5251 · 83d5251
1 parent ece3892
commit 83d5251
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 5 deletions.
diff --git a/css/index.css b/css/index.css
@@ -476,6 +476,8 @@ e {
 .iframe-container {
   width: 300px;
   height: 100%;
+  position: relative;
+  z-index: 5;
 }
 
 .msg-pop-up {

diff --git a/css/index.css.map b/css/index.css.map
diff --git a/css/index.scss b/css/index.scss
@@ -582,6 +582,8 @@ e{
 .iframe-container{
     width:300px;
     height:100%;
+    position: relative;
+    z-index:5;
 }
 
 // Message section
@@ -932,7 +934,7 @@ example{
 
     .iframe-container{
         width:100%;
-        
+
     }
 
     .side-projects{

diff --git a/index.html b/index.html
@@ -101,7 +101,7 @@
 
                     <div class="title">
 
-                        <h1 title="Profession">Jahir Raihan <span>- BackEnd Developer</span></h1>
+                        <h1 title="Profession">Jahir Raihan <span>- Software Engineer</span></h1>
 
                     </div>
 
@@ -192,7 +192,9 @@ <h1 title="Profession">Jahir Raihan <span>- BackEnd Developer</span></h1>
                 <div class="experience-project">
 
                     <div class="project-or-company-image">
-                        <img src="./img/calendar-generator.png" alt="Calendar Generator">
+                        <div class="iframe-container">
+                            <iframe class="iframe" style="width:100%; height:100%" src="https://www.youtube.com/embed/S_xDM-TWJaA?si=tGuc-VvPyoG-b1nR" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
+                        </div>
                     </div>
 
                     <div class="project-or-company-work-details">
@@ -218,6 +220,7 @@ <h1 title="Profession">Jahir Raihan <span>- BackEnd Developer</span></h1>
                         <div class="iframe-container">
                            <iframe class="iframe" style="width:100%; height:100%" src="https://www.youtube.com/embed/JyzB11u2Ros?start=275&mute=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
                         </div>
+
                     </div>
 
                     <div class="project-or-company-work-details">
@@ -240,7 +243,10 @@ <h1 title="Profession">Jahir Raihan <span>- BackEnd Developer</span></h1>
                 <div class="experience-project">
 
                     <div class="project-or-company-image">
-                        <img src="./img/ecommerce_site.png" alt="">
+
+                        <div class="iframe-container">
+                           <iframe class="iframe" style="width:100%; height:100%" src="https://www.youtube.com/embed/ZWOOBqdftT0?si=mfJXgpF-YvbQVFVb" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
+                        </div>
                     </div>
 
                     <div class="project-or-company-work-details">