- This topic is empty.
-
AuthorPosts
-
October 28, 2016 at 10:50 am #247164
webtectailors
ParticipantIs there a jQuery overlay pop-window, to allow YouTube video player to force full screen play but then return to normal screen, after play?
October 29, 2016 at 7:03 pm #247194Shikkediel
ParticipantThis seems to be a way to do it, not a pop-up but a wrapper:
http://stackoverflow.com/a/26619243/3168107
Unless of course I misunderstand the question.
October 29, 2016 at 10:03 pm #247195Shikkediel
ParticipantHere’s an example:
October 30, 2016 at 5:40 am #247196webtectailors
ParticipantThanks Shikkediel this is exactly what I’ve been looking for
October 30, 2016 at 10:41 am #247207Shikkediel
ParticipantCheers, it was quite interesting to have a look into the Youtube iframe API. Pretty usable actually. One quick tip because I also came across it… make sure this function does not have another wrapping function around it or else it will not fire:
function onYouTubeIframeAPIReady() { ... }
It’s a bit of a dirty approach by them that this has to be kept global…
As one can see, I also added a check so it will only reinsert the player when the video ends in fullscreen.
B-)
Edit – I might create a version that takes care of the above mentioned issue. Seeing some good clues on SO to limit the scope of things (it’s all global now)…
That went quicker than I thought. Now it has a nice document ready wrapper around it and can be used anywhere on the page without issues. The only global function is
onYouTubeIframeAPIReady
.November 1, 2016 at 11:23 am #247275Shikkediel
ParticipantOops, I ended up editing out a line and can’t save the pen anymore. That’s why the example above doesn’t seem to be working.
I’ve also added the line below, it will prevent the recommended videos upon ending which looks a bit better on Firefox especially when exiting fullscreen.
playerVars: {rel: 0}
November 3, 2016 at 10:46 pm #247438Shikkediel
ParticipantI’m an idiot, that link was fine (and the pen could still be saved) because I forked it to my account.
X-D
November 4, 2016 at 8:02 am #247453webtec
ParticipantThanks again, I tried this code first of all but it didn’t close after it played and kept showing unrelated videos here is the link:
pop up with video or map
November 4, 2016 at 12:41 pm #247490webtec
ParticipantI’ve tried the new code but I can’t get the pop window to work properly. How can I get this work?
November 4, 2016 at 3:19 pm #247503Shikkediel
ParticipantSo if I understand correctly, it’s not so much about closing a fullscreen video but more about closing the modal after it has finished?
A small demo of what you’ve tried so far would be very helpful…
November 4, 2016 at 3:34 pm #247505webtec
ParticipantHere is the code I used:
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Untitled Document</title>
<script>
document.getElementById(‘ytPlayer’).innerHTML = document.getElementById(‘codeholder’).innerHTML;
</script>
</head>[youtube https://www.youtube.com/watch?v=Pf4vesL4Qo0?rel=0&w=640&h=380%5D
<
div>
<
div>
<
div>
<script type=”text/javascript”>document.addEventListener(‘DOMContentLoaded’, function() {
var gate = window, page = this,
link = page.createElement(‘script’), video, iframe;link.src = ‘https://www.youtube.com/embed/Pf4vesL4Qo0?rel=0/iframe_api’;
page.getElementsByTagName(‘head’)[0].appendChild(link);gate.onYouTubeIframeAPIReady = makeFrame;
function makeFrame() {
if (video) video.destroy();
video = new YT.Player(‘player’, {
width: ‘100%’,
height: ‘100%’,
videoId: ‘5k_LZbS5oig’,
events: {
‘onStateChange’: phasePulse
}
});iframe = page.getElementById(‘player’);
}function phasePulse(event) {
if (event.data) return;
var style = gate.getComputedStyle(iframe, null),
range = parseInt(style.getPropertyValue(‘width’)),
crest = parseInt(style.getPropertyValue(‘height’));if (range == gate.innerWidth && crest == gate.innerHeight) makeFrame();
}
});</script>
November 4, 2016 at 4:28 pm #247509Shikkediel
Participant?
Some incomplete HTML, no modal script and the code I posted earlier… that’s not holding any clues I can work with. Please provide a small demo, on Codepen for example, and explain what you’re trying to achieve.
-
AuthorPosts
- The forum ‘Design’ is closed to new topics and replies.