brandly / brandly/angular-youtube-embed

PlayFullscreen on button click

Open
#135 5 comments 0 reactions 0 assignees View on GitHub
question
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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.