So I need to open an embedded YouTube player in a website, and I would like to set the focus to the player so that users can interact with the player like for instance toggle the video using the Space key.
var iframe = Object.assign(document.createElement('iframe'), {
src: 'https://www.youtube.com/embed/hLQl3WQQoQ0?autoplay=1&enablejsapi=1',
width: '400',
height: '200',
onload: () => {
console.log('iframe is loaded!');
iframe.focus();
}
});
document.body.appendChild(iframe);
This code inserts the player, and onload is called but the player still does not get the focus. Any idea if this is doable or not?
You would need to focus on the document inside the iframe to achieve this, which is not possible due to security reasons.
However, you can add a hidden button input, focus on it, and then use keyCode and the player API from youtube to pause and play the video in the case you press the space bar on that focused input of yours.
Have a look on this answer, and on the codepen it links to.
Related
Im using a pretty standard scrolltop snippet to run to certain parts on some of my pages but I also have some other functions that use anchors (ex. play button for audio player, share links, slider arrows)
Is there a way to improve the way the snippet handle anchors? Maybe a link with a special class or something?
$('a[href^="#"]').click(function(){
var the_id = $(this).attr("href");
$('html, body').animate({
scrollTop:$(the_id).offset().top - 100
}, 'slow');
return false;});
Ok found out I just had to add the class/id to it changing
$('a[href^="#"]').click(function(){
to
$('.your-class a[href^="#"]').click(function(){
yay me!
I've been given a design to implement which has a lightbox which has some content inside which includes links. This is all fine and working except for when it comes to iOS where it's not possible to interact with the content of a lightbox if its position happens to be on top of a video.
It's acting as though the video is on top of the lightbox content - even though it's behind. The issue occurs even with extremely simple barebones HTML.
Stripped back HTML:
<video id="home_video" controls preload="none" poster="http://www.videojs.com/img/poster.jpg" width="500">
<!-- video sources -->
</video>
<!-- positioned over the video -->
<div id="lightbox">
Not touchable on iOS
Touchable because it's not over a video
</div>
Associated stripped back styling:
#lightbox {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255,255,255,0.5);
}
#lightbox > a {
display: inline-block;
background: red;
padding: 20px;
}
#touchable {
margin-top: 400px; /* taller than video */
}
I've put together a jsfiddle example. It includes some JS which alerts when you've successfully clicked/touched a link. On desktop browsers it's possible to click both links, on iOS it's only possible to click the second.
It might be worth noting that the issue occurs whether the lightbox is pre-opened on page, or after being explicitly opened as in this jsfiddle
I can think of a number of ways of hacking around the problem - such as moving the video off screen, replacing it with its poster image, or by transforming the video using translateX to hide it, but I'd prefer to leave the video where it is, if possible.
Has anyone stumbled across this issue before and found a solution? Any pointers?
This is a quirk of Mobile Safari, where it intercepts all touch/click events for elements on top of a video element, regardless of z-index or DOM order, only when the controls attribute is set.
So the solution is to remove the controls attribute and implement your own custom controls wit Javascript. You can use existing open source players to provide these controls for you (e.g. jPlayer, videojs, etc.), but you need to be careful because some of them have a special case for iOS where they will just use the native player controls. I think this is because it's simpler than making those mouse-centric controls work with the quirks of iOS (like touch and lack of volume control). So you need to check the documentation to see if there's a flag to force the player to use its own controls rather than the built-in ones.
I have an embedded Youtube Playlist which used to work fine for the past 9 months or so.
It displays the first video of the playlist and we put a new video to the front of the list every few days whenever we have a new video to show.
Over the past few days Youtube has stopped displaying the first video of the playlist and instead it is displaying a 'Play all' button. Why has this suddenly started to happen?
We didn't change any of the embedded youtube parameters.
UPDATE
Just to clarify. Instead of the embed image of the first video I am getting just a black screen with the Play All button and the Play symbol on top of it. We tried changing videos and putting new ones in all in vain. Clicking on Play All then starts the video embedded in the player.
It does look like there is something not quite right happening when embedding a playlist with the <iframe> embed option. In addition to the issues you mention, it looks like when you finally do start playing the list, it is starting at index 1 (i.e. the 2nd video) rather than index 0. Might be worth seeing if a ticket has been logged referencing this behavior.
I can confirm that using the iframe API will achieve the desired results: something like this:
<!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: '',
events: {
'onReady': onPlayerReady
}
});
}
function onPlayerReady(event) {
player.cuePlaylist({'listType':'playlist','list':'PLE2714DC8F2BA092D'});
}
</script>
</body>
</html>
The poster for the first video in the playlist loads, and once you start playing it, then the playlist toolbar becomes available along the bottom for navigating to other videos in the list.
I'm working on some video controls for the iPad. When the user clicks a button, the video plays and immediately goes fullscreen. When the user clicks the "Exit fullscreen" button, I want the video to pause. If I could disable the "Exit fullscreen" button and force the user to use the "Done" button I would, but that doesn't seem to be an option.
My problem is that the webkitfullscreenchange event does not seem to fire on the iPad. It works flawlessly in Chrome on the desktop. I've read that the iPad browser won't run your event if metadata has not been loaded (which doesn't load until the video is played on the iPad - preload is ignored), but I have confirmed that metadata has been loaded before the fullscreen event is firing. Does anyone have any ideas on why the webkitfullscreenchange event will not fire on the iPad?
<script type="text/javascript">
$(document).ready(function() {
$(".jqVidLink").click(function(e) {
e.preventDefault();
var vidId = $(this).attr("name");
playPause(document.getElementById(vidId));
});
$(".jqVideo").each(function() {
this.addEventListener("webkitfullscreenchange", function(){
alert("hi2"); //never fires
if (document.webkitIsFullScreen == false) {
playPause(this);
}
}, false);
this.addEventListener("loadedmetadata", function() {
alert("hi"); //firing
this.webkitEnterFullscreen();
}, false);
});
});
function playPause(myVideo) {
if (myVideo.paused){
myVideo.play();
}
else
myVideo.pause();
}
reminds me of an article calling the iPad the new IE6. Don't expect the iOS browser to behave like desktop safari.
as a workaround you could show the video inline (--> not with native fullscreen) and add your own controls. downside of this approach is that the browser navigation wastes some vertical-space. upside is you can fully control what's happening. following this idea you can imitate fullscreen by putting the video (and your custom controls) inside a container which then has to be positioned fixed and sized to 100% for width and height - i did that by adding a class as you don't have to worry about the previous size when switching back to normal. instead you simply remove the class again.
one other thing to keep in mind if you wanna do this: you cannot move a video-node via JS inside the container on iOS. Instead you either have to provide the full markup in html or clone the video-node, remove the original and insert the cloned one inside your container.
you can try the .element:-webkit-full-screen css property
I was not able to register a fullscreen exit event for iframes on Safari
All I want to do is capture the event that a user taps an and clear it. I can't get anything to work with iPhone 3GS.. There is barely any documentation on how to actually use jQuery mobile.. that I can find anyway.. so theese are my guesses mostly:
$("#wrap").live('pageinit', function() {
$('#search_field').live('tap',function(event) {
if ($(this).val() == "Search Applications") {
$(this).val('');
}
});
});
This borks my design and adds a "loading" header at the bottom of the page....
Edit: Seems like it randomly works on the 3GS but the most annoying is that just jQuery mobile destroys my site layout!! my submit button jumps down
()
just looking over you code are you trying to use a place holder and clear it if the user taps it? If so you can simply add an attribute to your HTML5 like this:
<imput type="text" placeholder="Search Applications" />
Live example:
http://jsfiddle.net/KVuvm/
http://jsfiddle.net/KVuvm/1/ (With jQM Look and Feel)
http://jsfiddle.net/KVuvm/14/ (if you still wanted to use JS)