I have put my own custom title absolutely positioned over the top of an Vimeo video embed (you can see the dev site here http://ourcityourstory.com/dev/). When I click on the Vimeo video I want the title absolutely positioned over it to hide.
How do I accomplish this? None of the JS I'm writing is working.
Here is my non-working code:
$(document).click({namespace: this}, function (e) {
var t = e.data.namespace;
if ($(e.target).parents("#video-slider-wrapper iframe").length > 0 || $(e.target).is($("#video-slider-wrapper iframe"))) {
$("#episode h1").hide();
}
});
UPDATE: pimvdb's example listed below does exactly what I need my page to do — however, I keep getting the error "$f is not defined" on my page.
Your click handler does not work because the iframe is cross-domain. However, you can use the dedicated Vimeo API to add a listener when the play event is fired:
var player = $f( $('#player1').get(0) );
player.addEvent('play', function() {
$("h1").hide();
});
Related
what I need help with is adding some code to a snippet I have that autoruns a video in a popup when the popup is triggered and it auto closes the popup when the video ends. However, I have a couple of pages that also have a divi section background video. and I'm seeing some performance glitches. so I am aiming to add some code that pauses the background video when the popup is triggered.
I did find this snippet that pauses a background video on mouse hover so I think I am on the right track.
window.onload = function() {
let videoBg = document.getElementsByClassName('mejs-mediaelement')[0].firstElementChild.firstElementChild;
let bg = document.getElementsByClassName('et_pb_section_video')[0];
videoBg.pause();
bg.addEventListener('mouseover', function() {
videoBg.play();
});
bg.addEventListener('mouseleave', function() {
videoBg.pause();
});
}
so this tests out good on my pages the video pauses when the mouse leaves the page.
here is my code snippet I currently have to control auto play and auto close.
jQuery(document).ready(function($) {
homeVideoElement1 = $("#divi-video-container1 video")[0];
homeVideoElement2 = $("#divi-video-container2 video")[0];
DiviArea.addAction('show_area', function(area) {
if (area.hasId('sim-intro')) {
homeVideoElement1.play();
}
if (area.hasId('libraryintro')) {
homeVideoElement2.play();
}
// console.log('im open');
});
$('video').on('ended', function() {
//console.log('Video has ended!');
$('a.da-close').trigger('click');
});
});
could someone help me with some code to add to my snippet to pause the background video? is someone familiar with divimode.com js API?
at the moment I am unsure how to proceed, divimode.com's documentation has some broken links
so halfway down the links to JS API Overview and Code Generator return a 404 error. I did leave a message with the customer support sales side of things on divimode.com I don't have access to their tech support side.
I've been struggling with this for a while now and I've tried a number of solutions but I'm totally stuck on this:
I have a number of embedded videos from YouTube on my Site and I have navigation buttons. I want the videos to be paused as soon as any of the buttons are clicked, no matter how many of them are playing at that time. I embedded them the classic way by using the iframe code that YouTube gives you when clicking "embed" and gave them the ".yt" class.
My function currently looks like this:
$(function () {
$('#shadingleft').on('click', function () {
rotateLeft();
reset();
selector = selector - 1;
if (selector <= -1) {
selector = 9;
}
$('.clicked').toggleClass('clicked');
})
$('#shadingright').on('click', function () {
rotateRight();
reset();
selector = selector + 1;
if (selector >= 10) {
selector = 0;
}
$('.clicked').toggleClass('clicked');
})
$('#shadingtop').on('click', function () {
rotateUp();
$('.clicked').toggleClass('clicked');
})
$('#shadingbottom').on('click', function () {
rotateDown();
$('.clicked').toggleClass('clicked');
})
$('.art').on('click', function () {
$(this).toggleClass('clicked');
})
});
As you can see I already managed to toggle the highlighted ".art" elements in my gallery using toggleClass. Unfortunately it doesn't seem to work for playing and pausing videos.
Whenever one of the four "shading..." elements is clicked I want my ".yt" elements to stop playing the embedded video.
Thanks for helping!
This is a actually a big limitation with iframes. Most browsers won't allow a page's scripts to interact with the content of its iframes for security reasons. So chances are that there is no way at all to do that.
One way you could stop videos would be to reload the youtube iframe entierly, but that would put it back to 00:00 as if it was never played.
Another would be to try and fetch the video stream from youtube on your server and then displaying it in a player of your own on your page. (Which is obviously way more complicated than using an iframe)
Trying to call the vimeo api to pause video on a click event to hide it. And, on clicking to reveal the video again, play the video from its paused position.
There are various related questions on here, I can't find an answer to the simple "how to pause". I'm a jquery novice and can't make heads or tails of the froogaloop documentation.
Here's a FIDDLE, and my current jquery script to hide the video
$(document).click(function (event) {
if (!$(event.target).hasClass('click')) {
$('#video').hide();
}
});
which hides it when an element without the "click" class is clicked. But the video plays on in the background. Froogaloop is loaded in the fiddle. Thanks everyone
Here's an updated FIDDLE that makes pause/play work as I'd imagined. Click the image to play the video; click outside or on empty space (you control this with classes) to pause it; click image again to play from paused position. Simple, no buttons, no excess jquery or froogaloop code.
Putting this here for those who might benefit from it. And a +1 to mbrrw for getting me started.
var iframe = $('#video iframe')[0];
var player = $f(iframe);
$('.showvideo').on('click', function(){
$('#video').show();
$('.image').hide();
player.api('play');
});
$(document).click(function (event) {
if (!$(event.target).hasClass('click')) { //if what was clicked does not have the class 'click' (ie. any empty space)
$('#video').hide();
$('.image').show();
player.api('pause');
}
});
Remember to append api=1 to the vimeo link. And the url must be https, not http.
froogaloop can be a pain in the arse.
The code to get you started is here:
https://developer.vimeo.com/player/js-api#universal-with-froogaloop
I've adapted that to get it working i think how you expect here:
https://jsfiddle.net/fLe5xs4v/
Setting it up like so:
var iframe = $('#video iframe')[0];
var player = $f(iframe);
Note that if you change the text in the play and pause buttons you will break this code:
$('button').bind('click', function() {
player.api($(this).text().toLowerCase());
});
Give it a shot it should get you going in the right direction at least. Good luck!
I'm loading Kaltura's video player in a learning management system (essentially a CMS for educators and their students), and it gets presented inside an iframe. With current browser security protocols as they are, full screen viewing is not possible. I need to disable the fullscreen capability for this use case. Here's an idea how we have the embed set up:
loadMovie: function(id) {
var autoPlay = this._autoPlay;
var allowFullScreen = this._allowFullScreen;
kWidget.embed({
'wid': '_' + this._partnerId,
'targetId': this._playerTarget,
'uiconf_id': this._playerId,
'entry_id': id,
'params': {
'wmode': 'transparent',
'allowFullScreen': allowFullScreen, // not working for html player
},
'captureClickEventForiOS': true,
'readyCallback': function (playerId) { // autoPlay movies
var kdp = document.getElementById(playerId);
kdp.kBind('mediaReady', function() {
kdp.sendNotification('doPlay');
});
}
});
}
I've been able to hide the fullscreen button with CSS, but a user can still (intentionally or inadvertently) double-click the playback area to achieve fullscreen. Because of the iframe issue, the video essentially disappears, leaving the user confused and unable to easily close the player modal.
I'm passing a data attribute from the movie links to the player init function to indicate when fullscreen should be unavailable. I just need to find out how to actually do the disabling. Kaltura's documentation has not been helpful.
I've also fiddled with legacy Flash params, but they have no effect on the HTML 5 player. I'm using version 2.11. Thank you.
You need to put this in a script tag:
mw.setConfig('EmbedPlayer.EnableFullscreen', false);
Why don't you simply put a div overlay on top of the player with z-index, say 10000. That way, even if some double-clicks, they are clicking on the DIV and nothing happens. Continue with the CSS button hiding.
I am using the jquery function to toggle a youtube video element on my site. It works great and shows/hides its as needed. However I can't find a way to stop the video playing on hiding the div. I keep reading about destroying the element then recalling it on the toggle but I don't know enough about the code to know how or where to do that within the toggle functions. Any help would be amazing. I've added my code below
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
.vidblock
{
background:#ccc;
width:430px;
height:320px;
display:none;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$('.toggle').click(function(){
$('.vidblock').toggle("slow");
});
});
</script>
and
<h3>Click to view a video of how and where to enter <?=$merch_array['Name']?> <?=$merch_array['Term_Used']?>s</h3>
Okay! This one took me a little while to figure out, and when I tell you it's going to make sense.
Make sure you are calling the youtube api:
<script type="text/javascript" src="http://www.youtube.com/player_api"></script>
When hiding your div, use jquery to change the source of the video to the same video, without using autoplay. This stops the video from playing, and also sets it back up.
Another cool thing I found, is when opening my div, I turned it on autoplay.
You can see a demo on this page: http://advantageanywhere.com/index.aspx?sid=250
Click on the play link and it's going to open a lightbox (similar to what you are doing, showing and hiding the div. In it's original state I have it sitting there while hidden as a regular embed link. Once clicked, then it turns to autoplay, then when escape or X is clicked, it will close the lightbox and also change the video back to a normal embed (stops the playing)
We will take for example the following video:
The original embed from youtube [adding AN ID ( youtube ) to it to target in jquery, and the parm for youtube api ( ?enablejsapi=1 ) ]:
That is how you should have the image started off in it's hidden div.
Once the div is opened this is the jquery you need:
$('#youtube').attr("src", "http://www.youtube.com/embed/AAbOWbquDWU?enablejsapi=1&autoplay=1"); /* starts youtube video after lightbox opens */
Now, when the div is being hidden, this is the jquery you need:
$('#youtube').attr("src", "http://www.youtube.com/embed/AAbOWbquDWU?enablejsapi=1"); /* stops video from playing on youtube after hiding div */
Below is the entire script I have setup. I tried throwing this together for you in a fiddle but I don't have the time right now and just stumbled upon your question when I am trying to punch out a deadline.
If you have any other questions I don't mind helping out, please.
$(window).load(function(){
var KEYCODE_ESC = 27;
$(document).keyup(function(e) {
if (e.keyCode == KEYCODE_ESC) { closeLightBox(); }
});
function closeLightBox() {
$("#lb1, #lb4").fadeOut();
$("#featureContent, #videoContent").hide();
$('#youtube').attr("src", "http://www.youtube.com/embed/clJe9U38ids?enablejsapi=1"); /* stops video from playing on youtube after hiding div */
}
/* ------------ Light Box 4 Video ------------- */
var lightBox4 = $('#lb4'),
videoContent = $('#videoContent');
$('#anywhereVideo').click(function() {
lightBox4.fadeIn(function() {
videoContent.show();
$('#youtube').attr("src", "http://www.youtube.com/embed/clJe9U38ids?enablejsapi=1&autoplay=1"); /* starts youtube video after lightbox opens */
});
});
$('#close4').click(function() {
closeLightBox();
});
});
You don't have to destroy the element, just use the YouTube JavaScript API ( http://code.google.com/apis/youtube/js_api_reference.html ) to pause or stop the video.
You give the object a playerapiid, then you can target it with JavaScript.
You could use 'detach' -
$(function() {
var savedNodes;
$('.toggle').toggle(function() {
$('.vidblock').hide('slow', function() {
savedNodes = $('yourplayerid').detach();
});
}, function() {
$('.vidblock').append(savedNodes)
$('.vidblock').show('slow');
});
});
Demo - http://jsfiddle.net/Sf4LT/2/