Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Vlad Legkowski
Vlad Legkowski
9,882 Points

Muted video at a certain media query

Hi all, I have a page, which has a background as a video with sound, but at a certain @media the video get replaced by background-image, but the sound from the video is still going.

Any ideas how i can mute sound at certain width?

4 Answers

Vlad Legkowski
Vlad Legkowski
9,882 Points

<script> (function() { 'use strict'; var videos = document.querySelectorAll('video.mute-on-resize');//get all video tags with class="mute-on-resize". You can replace it any other CSS selector. var length = videos.length;//get total number of tags if (length === 0) {//check if total is 0 return; } function toggleMute(e) {//function to change mute of all videos for (var i = 0; i < length; i++) { videos[i].muted = e; } }; function resizeHandle() {//function to check size toggleMute(innerWidth <= 767); }; addEventListener('resize', resizeHandle);//run function when window resizes resizeHandle();//run function once on load })();

Answer above

Given Hirschau
Given Hirschau
1,968 Points

Great you got it

Given Hirschau
Given Hirschau
1,968 Points
Given Hirschau
Given Hirschau
1,968 Points

Where you replace the background-image, you can put something like muted.

<video controls muted>
<source src="movie.mp4" type="video/mp4">
</video>

Do you mean this ?

Vlad Legkowski
Vlad Legkowski
9,882 Points
Vlad Legkowski
Vlad Legkowski
9,882 Points

Bellow my Html and css, as you see i have the video with sound, but for smaller screens i replaced it with the picture, but the sound is still there, how do i get rid of it :)

<div class="fullscreen-bg">
<video loop autoplay poster="img/videoframe.jpg" class="fullscreen-bg__video">
    <source src="vid/Marbella%20Triathlon%20Start-HD.mp4" type="video/mp4">
</video>

</div>

 @media (max-width: 767px) {
.fullscreen-bg {
    background: url('../img/brownlee.jpg') center center / cover no-repeat;
    background-position: 40% 0%;
}

.fullscreen-bg__video {
    display: none;
}
Given Hirschau
Given Hirschau
1,968 Points

I think you need to use javascript for this....

var vid = document.getElementById(".fullscreen-bg__video");
vid.muted = true;
Vlad Legkowski
Vlad Legkowski
9,882 Points
Vlad Legkowski
Vlad Legkowski
9,882 Points

Ok, if i want to try it, what do i do?

Never touched JS before...