nyanloutre/site-max
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Pas de JQuery pour la vidéo principale

Browse Source
This commit is contained in:
nyanloutre 2017-07-16 23:21:41 +02:00
parent d869b21c6b
commit 9893bcbf8c
Signed by: nyanloutre
GPG Key ID: F85D93686A3A9063
3 changed files with 17 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
css/creative.css
View File

@ -193,9 +193,9 @@ header.masthead {
header.masthead a { header.masthead a {
position: absolute; position: absolute;
bottom: 2rem; } bottom: 2rem; }
header.masthead .video-sound { header.masthead #video-sound {
right: 4rem; } right: 4rem; }
header.masthead .youtube-link { header.masthead #youtube-link {
right: 8.5rem; } right: 8.5rem; }
@media (min-width: 768px) { @media (min-width: 768px) {
header.masthead { header.masthead {

28
index.html
View File

@ -64,7 +64,7 @@
</nav> </nav>
<header class="masthead"> <header class="masthead">
<video autoplay loop muted> <video id="masthead-video" autoplay loop muted>
<source src="video/1_Compilation_Graphique.webm" type="video/webm"> <source src="video/1_Compilation_Graphique.webm" type="video/webm">
</video> </video>
@ -72,11 +72,11 @@
<i class="fa fa-angle-down fa-2x" aria-hidden="true"></i> <i class="fa fa-angle-down fa-2x" aria-hidden="true"></i>
</a> </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> <i class="fa fa-volume-off fa-2x" aria-hidden="true"></i>
</a> </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> <i class="fa fa-youtube fa-2x" aria-hidden="true"></i>
</a> </a>
@ -159,7 +159,7 @@
</div> </div>
</div> </div>
</section> </section>
<!-- Bootstrap core JavaScript --> <!-- Bootstrap core JavaScript -->
<script src="vendor/jquery/jquery.min.js"></script> <script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/tether/tether.min.js"></script> <script src="vendor/tether/tether.min.js"></script>
@ -174,20 +174,18 @@
<script src="js/creative.min.js"></script> <script src="js/creative.min.js"></script>
<script> <script>
$("video").prop('muted', true); var masthead_video = document.getElementById("masthead-video");
var video_button = document.getElementById("video-sound");
$(".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');
video_button.onclick = function () {
if (masthead_video.muted) {
masthead_video.muted = false;
video_button.children[0].className = 'fa fa-volume-up fa-2x';
} else { } else {
$("video").prop('muted', true); masthead_video.muted = true;
$(".video-sound > .fa").removeClass('fa-volume-up'); video_button.children[0].className = 'fa fa-volume-off fa-2x';
$(".video-sound > .fa").addClass('fa-volume-off');
} }
}); };
$('.portfolio-control').hover(function () { $('.portfolio-control').hover(function () {
if ($(this).prop('paused')) { if ($(this).prop('paused')) {

4
scss/_masthead.scss
View File

@ -43,10 +43,10 @@ header.masthead {
position: absolute; position: absolute;
bottom: 2rem; bottom: 2rem;
} }
.video-sound { #video-sound {
right: 4rem; right: 4rem;
} }
.youtube-link { #youtube-link {
right: 8.5rem; right: 8.5rem;
} }
@media (min-width: 768px) { @media (min-width: 768px) {