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.
Related
I am trying to get my video to play when I click on the .gif.
I have tried multiple snipits, and coding it myself, but have not found a solution yet.
<div class="video" id="videoplayer">
<img src="images/gifisdone.gif">
<!-- <iframe width="940" height="529" src="https://www.youtube.com/embed/oUflzV5z9sc" frameborder="0" allowfullscreen></iframe>-->
</div>
Should be fairly simple. Just add a click call to the gif and then load the video. Run the snippet below to test it out.
<!DOCTYPE html>
<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="video" id="videoplayer">
<img src="https://media.giphy.com/media/H6niY8viJQvjYRJ7OD/giphy.gif" id="videolink1">
</div>
<div id="divVideo">
<iframe width="420" height="345" >
</iframe>
</div>
</body>
<script>
$('#videolink1').click(function(event) {
var videoFile = 'https://www.youtube.com/embed/tgbNymZ7vqY'+'?&autoplay=1';
$('#divVideo iframe').attr('src', videoFile);
});
</script>
</html>
I want to embed external link to my anchor tag with javascript.
When i press on achor tag, which is actually an image, i want to load < iframe > with that external link.
Firstly i need iframe to be hidden and only show when the anchor tag is clicked.
This is what i have so far:
html
<iframe name="myIframe" height="600" width="800" frameborder="0"></iframe>"<img src="img/icon.png">
js
function openUrl(){
var myUrl = "https://www.youtube.com/embed/zBFGkUmVkAs";
document.getElementsByName('myIframe')[0].src = myUrl;
}
});
But it doesn't work
Any help please?
Thanks!
#aiden87
Try this code below, I have made a demo please check this link. https://jsfiddle.net/saujankmarv/p7z38rhq/8/
html:
<a href="#" id="atag">
<img src="img/icon.png">
<iframe style="display:none;" id="myFrame"></iframe>
</a>
js
var openUrl = function() {
console.log('log');
var iframe = document.getElementById("myFrame");
iframe.src = "https://www.youtube.com/embed/zBFGkUmVkAs";
iframe.style.display = "block";
}
document.getElementById('atag').addEventListener('click', openUrl);
You can try this:
function openUrl() {
var iframe = document.getElementById("myFrame");
iframe.style.display = "block";
iframe.attr('src' , 'https://www.youtube.com/embed/zBFGkUmVkAs');
}
<a href="#" onclick="openUrl();">
<img src="img/icon.png">
</a>
<iframe width="560" height="315" id="myFrame" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen style="display:none">
</iframe>
Try this.
function openUrl() {
var iframe = document.getElementById("myFrame");
iframe.style.display = "block";
}
<img src="img/icon.png">
<iframe width="560" height="315" id="myFrame" src="https://www.youtube.com/embed/zBFGkUmVkAs" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen style="display:none"></iframe>
Inline click handlers are not the best solution , you can hide the iframe initially and then toggle its visibility.
$('a').on('click' , function(){
$(this).find('iframe').attr('src' , 'https://www.youtube.com/embed/zBFGkUmVkAs');
$(this).find('iframe').slideToggle(0);
return false;
})
a > iframe {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<iframe name="myIframe" height="600" width="800" frameborder="0"></iframe>"<img src="https://zartnerds.files.wordpress.com/2015/10/thumbnail.png">
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
I have multiple youtube video embeds inside a container, autoplay is enable but my problem is how to mute all the videos using javascript or any
<div id="video-container">
<iframe width="300" height="200" src="https://www.youtube.com/embed/o_nfdzMhmrA?wmode=transparent&autohide=1&autoplay=1&enablejsapi=1" frameborder="0" allowfullscreen></iframe>
<br><br>
<iframe width="300" height="200" src="https://www.youtube.com/embed/aBqU0LDd3WY?wmode=transparent&autohide=1&autoplay=1&enablejsapi=1" frameborder="0" allowfullscreen></iframe>
<br><br>
<iframe width="300" height="200" src="https://www.youtube.com/embed/ihc964sRt8M?wmode=transparent&autohide=1&autoplay=1&enablejsapi=1" frameborder="0" allowfullscreen></iframe>
</div>
I made a FIDDLE as an example but I don't know how to do it
Assign ids to each of your iframes, instanciate a player for each of them and mute the video when the player is ready :
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 players = new Array();
var players_list = ["ytplayer0", "ytplayer1", "ytplayer2"];
function onYouTubeIframeAPIReady() {
for (item in players_list) {
players[players_list[item]] = new YT.Player(players_list[item], {
events: {
'onReady': onPlayerReady
}
});
players[players_list[item]].name = players_list[item];
}
}
function onPlayerReady(event) {
players[event.target.name].playVideo();
players[event.target.name].mute();
}
<div id="video-container">
<iframe id="ytplayer0" width="300" height="200" src="https://www.youtube.com/embed/o_nfdzMhmrA?wmode=transparent&autohide=1&autoplay=1&enablejsapi=1" frameborder="0" allowfullscreen></iframe>
<br>
<br>
<iframe id="ytplayer1" width="300" height="200" src="https://www.youtube.com/embed/aBqU0LDd3WY?wmode=transparent&autohide=1&autoplay=1&enablejsapi=1" frameborder="0" allowfullscreen></iframe>
<br>
<br>
<iframe id="ytplayer2" width="300" height="200" src="https://www.youtube.com/embed/ihc964sRt8M?wmode=transparent&autohide=1&autoplay=1&enablejsapi=1" frameborder="0" allowfullscreen></iframe>
</div>
Here is a working jsfiddle
HTML
<iframe id="ytplayer" type="text/html" src="https://www.youtube-nocookie.com/embed/zJ7hUvU-d2Q?rel=0&enablejsapi=1&autoplay=1&controls=0&showinfo=0&loop=1&iv_load_policy=3" frameborder="0" allowfullscreen></iframe>
JS
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('ytplayer', {
events: {
'onReady': onPlayerReady
}
});
}
function onPlayerReady(event) {
player.mute();
player.playVideo();
}
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>