From 9893bcbf8c73a6878bed7872708bdd16ace9724c Mon Sep 17 00:00:00 2001
From: nyanloutre <paul.trehiou@protonmail.com>
Date: Sun, 16 Jul 2017 23:21:41 +0200
Subject: [PATCH] =?UTF-8?q?Pas=20de=20JQuery=20pour=20la=20vid=C3=A9o=20pr?=
 =?UTF-8?q?incipale?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 css/creative.css    |  4 ++--
 index.html          | 28 +++++++++++++---------------
 scss/_masthead.scss |  4 ++--
 3 files changed, 17 insertions(+), 19 deletions(-)

diff --git a/css/creative.css b/css/creative.css
index 3d37109..6d2a7f4 100644
--- a/css/creative.css
+++ b/css/creative.css
@@ -193,9 +193,9 @@ header.masthead {
   header.masthead a {
     position: absolute;
     bottom: 2rem; }
-  header.masthead .video-sound {
+  header.masthead #video-sound {
     right: 4rem; }
-  header.masthead .youtube-link {
+  header.masthead #youtube-link {
     right: 8.5rem; }
   @media (min-width: 768px) {
     header.masthead {
diff --git a/index.html b/index.html
index 5f85904..ad71cc3 100644
--- a/index.html
+++ b/index.html
@@ -64,7 +64,7 @@
     </nav>
 
     <header class="masthead">
-        <video autoplay loop muted>
+        <video id="masthead-video" autoplay loop muted>
             <source src="video/1_Compilation_Graphique.webm" type="video/webm">
         </video>
 
@@ -72,11 +72,11 @@
             <i class="fa fa-angle-down fa-2x" aria-hidden="true"></i>
         </a>
         
-        <a class="btn btn-default video-sound">
+        <a id="video-sound" class="btn btn-default">
             <i class="fa fa-volume-off fa-2x" aria-hidden="true"></i>
         </a>
         
-        <a class="btn btn-default youtube-link" href="https://youtube.com">
+        <a id="youtube-link" class="btn btn-default" href="https://youtube.com">
             <i class="fa fa-youtube fa-2x" aria-hidden="true"></i>
         </a>
 
@@ -159,7 +159,7 @@
             </div>
         </div>
     </section>
-
+    
     <!-- Bootstrap core JavaScript -->
     <script src="vendor/jquery/jquery.min.js"></script>
     <script src="vendor/tether/tether.min.js"></script>
@@ -174,20 +174,18 @@
     <script src="js/creative.min.js"></script>
     
     <script>
-        $("video").prop('muted', true);
-
-        $(".video-sound").click(function () {
-            if ($("video").prop('muted')) {
-                $("video").prop('muted', false);
-                $(".video-sound > .fa").addClass('fa-volume-up');
-                $(".video-sound > .fa").removeClass('fa-volume-off');
+        var masthead_video = document.getElementById("masthead-video");
+        var video_button = document.getElementById("video-sound");
 
+        video_button.onclick = function () {
+            if (masthead_video.muted) {
+                masthead_video.muted = false;
+                video_button.children[0].className = 'fa fa-volume-up fa-2x';
             } else {
-                $("video").prop('muted', true);
-                $(".video-sound > .fa").removeClass('fa-volume-up');
-                $(".video-sound > .fa").addClass('fa-volume-off');
+                masthead_video.muted = true;
+                video_button.children[0].className = 'fa fa-volume-off fa-2x';
             }
-        });
+        };
         
         $('.portfolio-control').hover(function () {
             if ($(this).prop('paused')) {
diff --git a/scss/_masthead.scss b/scss/_masthead.scss
index e670432..c18b3a7 100644
--- a/scss/_masthead.scss
+++ b/scss/_masthead.scss
@@ -43,10 +43,10 @@ header.masthead {
         position: absolute;
         bottom: 2rem;
     }
-    .video-sound {
+    #video-sound {
         right: 4rem;
     }
-    .youtube-link {
+    #youtube-link {
         right: 8.5rem;
     }
     @media (min-width: 768px) {