I want to add a class to a div when a vimeo embed is playing. I found some info on Vimeo API. This is the fiddle i ended up with. It works on the left video, when you play it the tester div turns red, when you pause it it turns yellow. How could i change the code so that it would work for both video's? Or to be more specific, on any number of vimeo embeds?
Just for completeness, heres the code im using:
HTML:
<iframe id="player1"
src="http://player.vimeo.com/video/27855315?api=1&player_id=player1"
width="400" height="225" frameborder="0"
webkitAllowFullScreen mozallowfullscreen allowFullScreen>
</iframe>
<iframe id="player2"
src="http://player.vimeo.com/video/27855375?api=1&player_id=player2"
width="400" height="225" frameborder="0"
webkitAllowFullScreen mozallowfullscreen allowFullScreen>
</iframe>
<p>Video status: <span class="status">...</span></p>
<div id="tester"></div>
CSS:
#tester{
background-color:yellow;
width:100px;
height:100px;
}
#tester.playing{
background-color:red;
}
JS/jQuery:
var iframe = $('#player1')[0],
player = $f(iframe),
status = $('.status');
// When the player is ready, add listeners for pause, finish, and playProgress
player.addEvent('ready', function() {
status.text('ready');
player.addEvent('pause', onPause);
player.addEvent('finish', onFinish);
player.addEvent('playProgress', onPlayProgress);
});
// Call the API when a button is pressed
$('button').bind('click', function() {
player.api($(this).text().toLowerCase());
});
function onPause(id) {
$('#tester').removeClass('playing');
}
function onFinish(id) {
$('#tester').removeClass('playing');
}
function onPlayProgress(data, id) {
$('#tester').addClass('playing');
}
Update:
Im adding the vimeo's dynamically to an empty iframe. This is where the problem arises of the solution not working anymore. To clarify things ive putted 2 fiddles together.
This fiddle works. When you play the video the yellow tester div turns red.
This fiddle doesnt work. First click the green "video 1" button, then the player shows. But when you press play on it the yellow tester div doesnt turn red.
I cant figure out what the problem is. When i inspect element, both iframes look exactly the same when they are rendered. Whats the difference and why doenst it work when i load the src dynamically?
You can add a class to all of the player iframes so in the code you just need to check if the player has the class or not and change whatever you want to.
Also it looks like you have to define the players in js as well and bind the event each time. There might be better ways to do this but I just looked at the code and came up with this
http://jsfiddle.net/HfwWY/2558/
<iframe id="player1" class="change" src="http://player.vimeo.com/video/27855315?api=1&player_id=player1" width="400" height="225" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
<iframe id="player2" class="change" src="http://player.vimeo.com/video/27855375?api=1&player_id=player2" width="400" height="225" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
JS
var iframe = $('.change');
iframe.each( function() {
var player = $f( $(this)[0] );
// When the player is ready, add listeners for pause, finish, and playProgress
player.addEvent('ready', function() {
status.text('ready');
player.addEvent('pause', onPause);
player.addEvent('finish', onFinish);
player.addEvent('playProgress', onPlayProgress);
});
} );
var status = $('.status');
Feel free to change the class change to something more meaningful like videoPlayer or whatever, just make sure the change is applied in js as well
Related
The YouTube videos are embedded in the SVG code using the foreignObject element with an iframe. The problem is that the video keeps playing when another is selected to play. I would like for the current video playing to stop when another starts to play. I would be better so the user of the site does not have to go back and forth to stop playing videos that they previously played. I have tried the stopVideo and pauseVideo functions but they don't seem to work.
THIS IS THE CURRENT FUNCTION BEING USED TO HIDE THE VIDEO PLAYER WHEN ANOTHER LINK(TAG) IS CLICKED TO OPEN UP ANOTHER YOUTUBE VIDEO, ALLOWING THE USER TO WATCH THE VIDEO AND HIDE THE PREVIOUS ONE. I WOULD LIKE FOR THE PREVIOUS VIDEO TO STOP PLAYING WHEN THIS EVENT HAPPENS.
<script type="text/javascript">
<![CDATA[
var id = 'name';
function place(id) {
var gs = document.getElementsByClassName("textboxes");
// Hide all the elements
for (var i = 0; i < gs.length; i++) {
gs[i].classList.add("hidden");
}
// But make sure the one with "id" is visible
document.getElementById(id).classList.remove("hidden");
}
]]>
</script>
<script>
function reset() {
document.getElementById("introinfo").classList.remove("hidden");
document.getElementById("textboxes").classList.add("hidden");
}
</script>
THIS IS HOW THE YOUTUBE VIDEOS ARE EMBEDDED IN THE SVG CODE
<g id="introinfo" class="textboxes">
<rect id="info-box" x="1676.49" y="35.62" class="st611" width="1292.93" height="715"/>
<foreignobject x="1676" y="35" width="1292" height="715">
<div style="margin-bottom: 0px; padding-bottom: 0px;"><iframe class="youtube-video" width="1292" height="575" xmlns="http://www.w3.org/1999/xhtml" src="https://www.youtube.com/embed/********wmode=opaque&enablejsapi=1&version=3" allowscriptaccess="always" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
</foreignobject>
</g>
I'm trying to perform an action on the 'ended' event on my embeded vimeo clip. This is not firing because, according to vimeo documentation, video is on loop. So I tried adding loop=0 to the url but it doesn't seem to be doing anything.
<body>
<iframe src="https://player.vimeo.com/video/717499153?muted=1&controls=0&autoplay=1&loop=0" width="240" height="320" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen="" title="video" data-ready="true"></iframe>
</body>
Is that some sort of rule for autoplayed embeds? How can I force it to play just once?
You have to add also background=1 as documented here :
https://developer.vimeo.com/api/oembed/videos
background - false -
For videos on a Vimeo Plus account or higher: whether to hide all video controls, loop the video automatically, enable autoplay, and mute the video. The loop and autoplay behaviors can't be overridden, but the mute behavior can be; see the muted argument below.
This is the correct URL :
<iframe src="https://player.vimeo.com/video/717499153?muted=1&controls=0&autoplay=1&background=1&loop=0" width="240" height="320" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen="" title="video" data-ready="true"></iframe>
I do recommend next time to contact Vimeo Support to help with this,
Have a nice day
I am currently working on a chrome extention for youtube and I want to disable the option for the user to pause/play the video by clicking on it.
I saw some posts that say "video.off('click');" but it dosent work.
I tried this one also :
video.addEventListener('click', function(event){
console.log("preventing?")
event.preventDefault();
});
but still it doesn't do nothing.
I would love some help if possible - Thank you all in advance!
Edit:
I saw the comments and I want to sharpen my question. I need a solution to disabling just the click event to stop the play/pause from there.
I also need the answer to be written in a javascript file because I want to control whether or not the user can click on the video.
I've also looked in: Javascript code for disabling mouse click for youtube videos but I haven't managed to find a corrent solution to my spesific question. I saw one solution that recommend to add a transparent overlay on top of the video element but I have no idea how to do so and how to make it resize as the video player itself resizes
Attach a click listener on window + use the capture phase by specifying true for the third parameter of addEventListener + use stopPropagation, so that your listener will be the first target in the event propagation chain i.e. it'll run before the site's handlers because sites usually don't use the capture phase.
window.addEventListener('click', event => {
if (event.target.matches('video')) {
event.stopPropagation();
}
}, true);
Note that if some rare site uses the exact same trick, you can still override it by declaring your content script with "run_at": "document_start".
I noticed that some websites showing youtube videos put a transparent overlay on top of the player so that the users cannot click on the "Open in YouTube" icon. This might help you too, even if it might still be able to give focus to the controls using the keyboard.
You can check both the implementations here: https://stackblitz.com/edit/web-platform-4oehg4?file=index.html ( SO snippet can't embed yt iframe videos )
// HTML
<div class="container">
<iframe
id="video2"
width="100%"
height="100%"
src="https://www.youtube.com/embed/LcGRpsD6yuk?controls=0?mute=1&autoplay=1"
title="YouTube video player"
frameborder="0"
allow="accelerometer; mute; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture;"
></iframe>
<div class="overlay"></div>
</div>
// CSS
.container {
position: relative;
width: 100%;
height: 50%;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Using CSS Only:
// HTML
<iframe
width="100%"
height="50%"
id="video"
src="https://www.youtube.com/embed/LcGRpsD6yuk?controls=0?mute=1&autoplay=1"
title="YouTube video player"
frameborder="0"
allow="accelerometer; mute; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture;"
></iframe>
// CSS
#video {
pointer-events: none;
}
I'm trying to create popup with Vimeo video inside. I have div on my page with id="showVideo". On click on that div I want to open popup (new div with id="opened-video" ). Div with id="opened-video" have iframe of Viemo video that looks like this
<iframe id="video-iframe" src="https://player.vimeo.com/video/102895556?autoplay=1" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
This iframe is set to auto play using ?autoplay=1 parameter in src url.
This is my JavaScript
jQuery(document).ready(function(){
jQuery('#showVideo').click(function() {
jQuery('#opened-video').fadeIn().html('<iframe id="video-iframe" src="https://player.vimeo.com/video/102895556?autoplay=1" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe><img src="<?php echo get_template_directory_uri()?>/images/resp-menu-close.png" alt="Close video" onClick="closeDiv()" id="close-video" />');
});
});
and this works.
You will notice image tag in html() function, that's image that is used to close id="opened-video" and I do that with Javascript function
function closeDiv() {
document.getElementById('opened-video').style.display = "none";
}
and this works too, but with one problem, opened-video is set to display="none" but Vimeo video is still playing in background, I hear sound. How to stop video working when I press on id="close-video" image? How I can remove src parameter ?autoplay=1 when I click on image? Or any other suggestion?
This is HTML
<img src="<?php echo get_template_directory_uri()?>/images/play-real.png" alt="Play real" id="showVideo" />
<div class="video-front" id="opened-video">
</div>
Inside your closeDiv() function, insert these two lines after making the display none,
$('iframe').attr('src', "");
$('iframe').attr('src', $('iframe').attr('src'));
So that it will look like,
function closeDiv() {
document.getElementById('opened-video').style.display = "none";
// Removes the src
$('iframe').attr('src', "");
// Reloads the src so that it can be played again
$('iframe').attr('src', $('iframe').attr('src'));
}
Working DEMO
I've something like this
<div draggable="true">
<iframe width="640" height="360" src="http://www.youtube.com/watch?v=dQw4w9WgXcQ?fs=1&feature=oembed" frameborder="0" allowfullscreen="">
</iframe>
</div>
and I want to be able to drag the entire div when I start the drag by clicking anywhere on the div including the iframe. However the iframe doesn't cascade the event. I also want to keep the interactions with the youtube video possible (play, fullscreen, etc).
Does anyone have any idea how to do this with html/css/js/jQuery?
here you have a near example you want....just fix it a little
#dra
{
width:560px;
height:315px;
border:1px solid green;
cursor:pointer;
}
#dra:hover iframe
{
z-index:-1;position:absolute;
}
<div id="dra"><iframe width="560" height="315" src="http://www.youtube.com/embed/T6s3d2wdXVg" frameborder="0" allowfullscreen></iframe></div>
<script>
$( "#dra" ).draggable({stop: function() {
$( "iframe" ).css('z-index','0');
}});
</script>