How can I mute an iframe vimeo - javascript

I've tried every possible solution I can find, but I can't seem to mute my iframe vimeo video. I've referenced "//f.vimeocdn.com/js/froogaloop2.min.js" in the head. And I'm using the following javascript at the bottom of the page...
<script type="text/javascript">
var iframe = document.getElementById('vimeo_player');
var player = $f( iframe );
player.addEvent('ready', function() {
player.api('setVolume', 0);
});
</script>
You can see my attempt here: http://walkinthedog.com/video-test/
Any help is most appreciated.

Use setVolume from the api in your vimeo embed.. player.api('setVolume', 0); it will be like this...
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//f.vimeocdn.com/js/froogaloop2.min.js"></script>
<iframe id="vimeo_player" src="http://player.vimeo.com/video/4415083? title=0&byline=0&portrait=0&color=d01e2f&autoplay=1" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
<script>
var iframe = $('#vimeo_player')[0],
player = $f(iframe),
status = $('.status');
player.addEvent('ready', function() {
player.api('setVolume', 0);
});
</script>

With the latest version, there's an even easier solution:
<iframe id="vimeo_player" src="http://player.vimeo.com/video/4415083?autoplay=1" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
<script src="https://player.vimeo.com/api/player.js"></script>
<script>
var player = new Vimeo.Player(document.getElementById("vimeo_player"));
player.on('play', function() {
player.setVolume(0)
});
</script>

Related

document.getElementById is null with Lazysizes loaded iframe

I'm trying to get the lazy loaded iframe Id and fail with a TypeError n is null. What am I missing?
$(document).ready(function() {
var widgetIframe = document.getElementById('sclazy');
console.log(widgetIframe);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<iframe id="sclazy" height="500" width="500" frameborder="0" allow="autoplay" class="lazyload" allowfullscreen="" data-src="https://w.soundcloud.com/player/?url=https://api.soundcloud.com/tracks/188612777&auto_play=false&buying=false&sharing=false&download=true&single_active=true&hide_related=true&show_comments=true&show_user=false&show_reposts=false&show_teaser=false&visual=true&show_artwork=true">
</iframe>
Had the same pb, but i did it in two times like this:
var iframeElement = document.querySelector('iframe');
var iframeElementID = iframeElement.id;

how to play the vimeo video on query automatically?

In the beginning,the video is show,but the it is stop.
I want to play the video when browser starts.
<html>
<head></head>
<body>
<!-- NOTE: ?api=1 and player_id at the end of the URL -->
<iframe id="player" width="" height="" src="http://player.vimeo.com/video/62207569?api=1&player_id=player" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
<script src="http://a.vimeocdn.com/js/froogaloop2.min.js"></script>
<script>
var player = $f(document.getElementById('player'));
player.addEvent('ready', function() {
player.api('play');
});
</script>
</body>
</html>
The froogaloop2 js is not working now try to use player.vimeo.com/api/player.js.
Just try like this
<iframe id="player" width="" height="" src="http://player.vimeo.com/video/62207569?api=1&player_id=player" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
<script src="https://player.vimeo.com/api/player.js"></script>
<script>
var frame = document.querySelector('iframe');
var jqueryPlayer = new Vimeo.Player(frame);
jqueryPlayer.play();
console.log('played the video!');
</script>
I have run this code, just check the out put
You can refer to this https://github.com/vimeo/player.js#create-a-player for more details.

auto embed the most recent video from youtube playlist

There was a question about to make an auto embed the most recent video from the channel.
I am trying to make auto embed the most recent video from youtube playlist to webpage.
If a new one would be added on the youtube playlist - it would automatically updates on your webpage.
Here is the code I tried, but it does not update for the latest video, possibly I do something wrong.
<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<iframe width="560" height="315" src="https://www.youtube.com/embed/rI4kdGLaUiQ" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
<script>
var channelID = "UCCTVrRB5KpIiK6V2GGVsR1Q";
$.getJSON('https://api.rss2json.com/v1/api.json?rss_url=https%3A%2F%2Fwww.youtube.com%2Ffeeds%2Fvideos.xml%3Fchannel_id%3D'+channelID, function(data) {
var link = data.items[0].link;
var id = link.substr(link.indexOf("=")+1);
$("#youtube_video").attr("src","https://youtube.com/embed/"+id + "?controls=0&showinfo=0&rel=0");
});
</script>
</body>
</html>
Your issue is that you're targetting an element with id youtube_video but have no element with that id. I tested this locally and saw your issue. Also I added some other code that's better (doing this on document ready).
<body>
<iframe id="youtube_video" width="560" height="315" src="https://www.youtube.com/embed/rI4kdGLaUiQ" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
<script type='text/javascript'>
$(document).ready(function() {
var channelID = "UCCTVrRB5KpIiK6V2GGVsR1Q";
$.getJSON('https://api.rss2json.com/v1/api.json?rss_url=https%3A%2F%2Fwww.youtube.com%2Ffeeds%2Fvideos.xml%3Fchannel_id%3D'+channelID, function(data) {
var link = data.items[0].link;
var id = link.substr(link.indexOf("=")+1);
$("#youtube_video").attr("src","https://youtube.com/embed/"+id + "?controls=0&showinfo=0&rel=0");
});
})
</script>
fiddle

Start & Stop a iframe with php

I want to make 4 channel in my website, but I want to make start for the first channel automatically and after 5 second start the second channel ... etc
code of channel
The Code
window.addEventListener("load", function() {
var interval = setInterval(function() {
iframes[++n].src = urls[n - 1];
iframe[n].style.display = "block";
console.log(n);
if (n === iframes.length -1)
{
clearInterval(interval); console.log("all iframes loaded")
}
},
5000)
})
.channel1, .channel2, .channel3{
display:none;
}
<html>
<head>
<script type="text/javascript" src="js.js"></script>
<link rel="stylesheet" href="css.css">
</head>
<body>
<iframe width="560" height="315" src="https://www.youtube.com/embed/BqPmcSGgs3U?autoplay=1" frameborder="0" allowfullscreen></iframe>
<iframe class="channel1" width="560" height="315" src="https://www.youtube.com/embed/BqPmcSGgs3U?autoplay=1" frameborder="0" allowfullscreen></iframe>
<iframe class="channel2" width="560" height="315" src="https://www.youtube.com/embed/BqPmcSGgs3U" frameborder="0" allowfullscreen></iframe>
<iframe class="channel3" width="560" height="315" src="https://www.youtube.com/embed/BqPmcSGgs3U" frameborder="0" allowfullscreen></iframe>
</body>
</html>
This code doesn't work, I can listen the commutator talk but I cant see the channel why ?
You can set iframe elements 1-4 src to empty string, utilize setInterval to set src of each iframe 1-4 to a url within an array every five seconds until all iframe elements have src set.
window.addEventListener("load", function() {
var urls = ["data:text/plain,b", "data:text/plain,c", "data:text/plain,d"];
var iframes = document.querySelectorAll("iframe");
var n = 0;
var interval = setInterval(function() {
iframes[++n].src = urls[n - 1];
console.log(n);
if (n === iframes.length -1) {
clearInterval(interval);
console.log("all iframes loaded")
}
}, 5000)
})
<iframe src="data:text/plain,a"></iframe>
<iframe src=""></iframe>
<iframe src=""></iframe>
<iframe src=""></iframe>

Loading of an iframe after another

I have two iframes in my web page, and I want to load the second iframe after the first iframe has finished loading. How can I do this? I tried using the settimeout function, but I encountered some problems.
This is my code:
<iframe src="firstiframe" frameborder="0" widht="100%" marginheight="0" marginwidth="0" scrolling="NO" id="the_iframe">
</iframe>
<iframe src="secondframe" frameborder="0" widht="100%" marginheight="0" marginwidth="0" scrolling="NO" id="the_iframe2" >
</iframe>
<script>
function resizeIframe(iframeID)
{
document.setTimeout("resizeIframe",1000);
var iframe = window.parent.document.getElementById(iframeID);
var container = document.getElementById('content');
iframe.style.height = container.offsetHeight + 'px';
}
</script>
You can use the jQuery ready function on the frame to see when it's loaded and then set the src url for the second frame. Something like:
$('#firstframe').ready(function() {
$('#secondframe').attr('src', 'http://yourlink');
});
You can do something like this:
$("#firstIframe").load(function (){
$("#secondIframe").load();
});
I would do this with jquery:
First iframe:
<iframe id="iframe1"></iframe>
<div id="loadsecondIframeHere"></div>
<script>
$('#iframe1').ready(function(){
$('#loadsecondIframeHere').html('<iframe id="iframe2"></iframe');
});
</script>
or use $(document).ready()

Categories

Resources