brandly / brandly/angular-youtube-embed
PlayFullscreen on button click
- Dominant language
- HTML
- Stars
- 505
- Forks
- 145
- PR merge metrics
- No merged PRs in 30d
Description
Hi,
Thanks for the directive and it works awesome :+1:
And I am wondering how can change the player extension when user clicks on Play button it should auto play in fullscreen. was able to get it worked with JS with script tags in my player since I am using angular was facing few bugs with it and started looking into this extensions which works pretty neat.
the below code which i used to play full screen on button click.
``` js
function playFullscreen() {
//iframe.css("visibility", "visible");
player.playVideo();//won't work on mobile
var requestFullScreen = iframe.requestFullScreen || iframe.mozRequestFullScreen || iframe.webkitRequestFullScreen;
if (requestFullScreen) {
requestFullScreen.bind(iframe)();
}
```
appreciate if we can added it in this directive or how should I include it in my controller so that I can achieve fullscreen on play button
## Reference
var player, iframe;
var playnow = document.querySelector.bind(document);
// init player
function onYouTubeIframeAPIReady(vart) {
player = new YT.Player('player', {
height: '200',
width: '300',
videoId: '123455987',
//events: {
// 'onReady': onPlayerReady
//}
});
}
// when ready, wait for clicks
//function onPlayerReady(event) {
// var player = event.target;
// iframe = playnow('#player');
// //setupListener();
//}
//function setupListener() {
// playnow('button').addEventListener('click', playFullscreen);
//}
//$("#testvid").click(function () {
// $("#player").show();
// if (player) {
// var fn = function(){
// playFullscreen();
// }
// }
//});
//function playFullscreen() {
// //iframe.css("visibility", "visible");
// player.playVideo();
// var requestFullScreen = iframe.requestFullScreen || iframe.mozRequestFullScreen || iframe.webkitRequestFullScreen;
// if (requestFullScreen) {
// requestFullScreen.bind(iframe)();
// }
//}
Contributor guide
No contributing guide indexed for this repository
Research direction
Start by reading the YouTube player directive and the Angular controller integration described in the issue, then compare them with the supplied JavaScript fullscreen example. Determine how the play-button action is exposed and whether the browser fullscreen API can be invoked there. Done means clicking Play starts playback and enters fullscreen where supported, with the behavior verified on relevant devices.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- angular, javascript
- Domain
- frontend, web-dev
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 35/100