Forum Discussion
Automatically mute audio when playing embedded videos from external sites
Hi all! Me again with another question about embedded videos from external sites. I'm struggling with finding a straightforward way to automatically mute audio when a user clicks to play a video...
Hi Kaylea,
There are two examples to demonstrate this interaction. In Example 1, the timeline automatically pauses when the video starts playing and resumes when the video is paused or stopped. Because the timeline is paused during video playback, the audio tied to it will also pause and resume accordingly. In Example 2, the audio is controlled directly based on the video's state. When the video is playing, the audio pauses, and when the video stops or is paused, the audio resumes. The timeline functionality or status is not affected.To insert your own video, open index.html found in "Example 1" folder, and replace videoId with the ID of your video. If you have changed the variable name in Storyline, make sure to update the variable name accordingly. Ensure that this variable always matches the one used in Storyline. Insert it as WebObject into Storyline.
If you choose to go with Example 2, use the index.html from the "Example 2" folder. Both index.html files are almost identical, but they reference different Storyline variables depending on whether you choose Example 1 or Example 2 for your setup.
Keep in mind that whenever you edit something in the index.html file—whether it's the video ID or a variable name—make sure to rename the folder before inserting it back into Storyline as a web object.Please find the attached zip file, which includes the following:
- Storyline project with two slides, Example 1 and Example 2
- Two folders (Example 1 and Example 2) – Each folder contains an index.html file
Once you open the Storyline file, everything will become clearer. Please don't hesitate to reach out if you need any further assistance or clarification.
I would likely opt for the WebObject approach, as it provides easier access to the YouTube API, allowing you to check whether the video is playing, paused, or ended. This method enables you to set Storyline variables as needed, which can then control the timeline based on those variable values. However, this approach involves JavaScript. You can see this method in action here. Let me know if this is an option you'd like to explore, and I'll upload the example used in the demonstration.
Hi Nedim - this looks to be exactly what I want to do! Yes please, if you could upload how you did this, I would be eternally grateful.
Hi Kaylea,
There are two examples to demonstrate this interaction. In Example 1, the timeline automatically pauses when the video starts playing and resumes when the video is paused or stopped. Because the timeline is paused during video playback, the audio tied to it will also pause and resume accordingly. In Example 2, the audio is controlled directly based on the video's state. When the video is playing, the audio pauses, and when the video stops or is paused, the audio resumes. The timeline functionality or status is not affected.To insert your own video, open index.html found in "Example 1" folder, and replace videoId with the ID of your video. If you have changed the variable name in Storyline, make sure to update the variable name accordingly. Ensure that this variable always matches the one used in Storyline. Insert it as WebObject into Storyline.
If you choose to go with Example 2, use the index.html from the "Example 2" folder. Both index.html files are almost identical, but they reference different Storyline variables depending on whether you choose Example 1 or Example 2 for your setup.
Keep in mind that whenever you edit something in the index.html file—whether it's the video ID or a variable name—make sure to rename the folder before inserting it back into Storyline as a web object.Please find the attached zip file, which includes the following:
- Storyline project with two slides, Example 1 and Example 2
- Two folders (Example 1 and Example 2) – Each folder contains an index.html file
Once you open the Storyline file, everything will become clearer. Please don't hesitate to reach out if you need any further assistance or clarification.The zipped file didn't go through for some reason, so I'll post the HTML for both examples here instead:
Example 1:<!DOCTYPE html> <html> <body> <div id="player"></div> <script> var tag = document.createElement('script'); tag.src = "https://www.youtube.com/iframe_api"; var firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); var player; function onYouTubeIframeAPIReady() { player = new YT.Player('player', { height: '390', width: '640', videoId: 'aHm3ZKzVP7w', events: { onStateChange: (event) => { parent.GetPlayer().SetVar('isTimelinePaused', event.data === YT.PlayerState.PLAYING); } } }); } </script> </body> </html>Example 2:
<!DOCTYPE html> <html> <body> <div id="player"></div> <script> var tag = document.createElement('script'); tag.src = "https://www.youtube.com/iframe_api"; var firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); var player; function onYouTubeIframeAPIReady() { player = new YT.Player('player', { height: '390', width: '640', videoId: 'aHm3ZKzVP7w', events: { onStateChange: (event) => { parent.GetPlayer().SetVar('isVideoPlaying', event.data === YT.PlayerState.PLAYING); } } }); } </script> </body> </html>
