Autoplaying a full screen YouTube video on button press with JQuery - javascript

My website has a video banner at the top of the home page similar to AirBnb's. It has a play glyphicon on it. When I press the glyphicon, I want a video from YouTube to open in fullscreen mode and play automatically. Then, when the user quits the fullscreen video, I want the Iframe to vanish and all audio to stop.
Right now I have this for Slim markup
.fullScreenContainer
.video-container#autovid height="100%"
= video_tag("broll2.mp4", autoplay: true, muted: true, preload:true, loop:true)
.container#playButton
.text-center
h1#videoHeading Press Play to Watch the Video
a href="javascript:void(0);" onclick="addIntroVideo()"
span.glyphicon.glyphicon-play
and this is my jQuery function
function addIntroVideo() {
$('<iframe id="introVideo" src="https://www.youtube.com/embed/6a8fvbkNLWQ?rel=0&autoplay=1" frameborder="0" allowfullscreen="true"></iframe>').appendTo('.fullScreenContainer');
}
My understanding is that appending ?rel=0&autoplay=1 to the YouTube URL makes the video play in full screen mode and start automatically. However, when I press play it just loads a tiny iframe and autoplays that. How do I change this code to get it to do what I want?

Don't make the iframe yourself. Instead, use the YouTube iframe API example
You can add embedded JavaScript under this Slim tag:
javascript:
That JavaScript creates the iframe and an object called player that has methods stopVideo() and startVideo(), and you can use more JavaScript to hook those functions to a button click handler.

Related

Autoplay Embedded YouTube videos in the background?

I have a website with embedded YouTube videos. I'm using the YouTube player API to embed my videos, and the player is set to autoplay when the page loads. I've set a listen event to redirect to the next video once the current embedded video has finished playing (I need to redirect to a new physical page rather than load the next video into the existing iframe created by the API as each page contains information/comments specific to that video).
This all works perfectly, but only if you have the tab open. If you're listning to the videos in the background (they're just audio recordings set to a static image, there's nothing to actually watch), the page will redirect fine after the current video finishes, but the YouTube video will not start playing until you click into the tab. As soon as you do click into the tab, the autoplay kicks in and the video starts. But I need the videos to play automatically whether the tab is open or not. Any ideas?
I've experimented with JWplayer, and the redirect/autoplay works perfectly, but that would mean having to host the videos myself, and I'd rather host on YouTube. I've also noticed that YouTube.com doesn't have this problem. It will load the next video page in a playlist and autoplay whether the tab is open or not.
This problem only occurs in Chrome, Firefox and Opera, but not in Edge or IE.
Thanks.
<div id="yt-player"></div>
<script src="http://www.youtube.com/player_api"></script>
<script>
// create youtube player
var player;
function onYouTubePlayerAPIReady(){
player = new YT.Player('yt-player',{
height:'433',
width:'770',
videoId:'xxxxxxxxxxx',
playerVars: { 'autoplay': 1, 'controls': 1, 'html5': 1 },
events:{
'onReady':onPlayerReady,
'onStateChange':onPlayerStateChange
}
});
}
// autoplay video
function onPlayerReady(event){
event.target.playVideo();
}
// when video ends
function onPlayerStateChange(event) {
if(event.data === 0 && $("#autoplayCB").is(':checked')) {
window.location="/nextvideo.htm";
}
}
</script>
I've come across this problem. I found that you must create the player first, then to change the video you use loadVideoById.
https://developers.google.com/youtube/iframe_api_reference#Queueing_Functions
The problem here is that you must make the list of videos yourself, or find some way of getting the list of videos into a javascript array and call the next one when the current video ends. You will need to build a manual playlist.
The only other caveat is that you must let the video load the first time you're on the page, opening it in a new tab without giving the tab focus will prevent it from initialising until you do so.

Flowplayer: how I can play video by javascript

how can start a video after click a generic button.
I just initialized the flowplayer in my page.

Prevent iframe playing youtube video

Is there an option in iframe to prevent it from playing video i.e. I have following iframe:
<iframe src="https://www.youtube.com/embed/v2ifWcnQs6M" width="468" height="60" ></iframe>
I want to display just the thumbnail of youtube video with red 'play' button in the center of thumbnail, but disallow user to actually play video. Is there a way to do it ?
Because as I checked Youtube IFrame API there is no solution for getting youtube video id i.e. I have to parse url by myself and then construct the following url:
https://img.youtube.com/vi/video_id/0.jpg
And besides this url returns thumbnail without red 'play' button which I also want. So is there an HTML attribute in iframe or js workaround to do it ?
Add a transparent div on top of the YouTube video with CSS.
See example.
No. No such attribute. If you dont want to allow users play that video, you need to construct block manually. Get the thumbnail and create or cut play button image. Then within CSS write layout rules and show to user this constructed block

Using jQuery Galleria how can one subscribe to a Youtube player ready event?

Galleria has a bunch of useful API functions (http://galleria.io/docs/api/events) but none of them appear to allow you to detect when a Youtube video player iFrame has successfully loaded.
The previous version of Galleria did not support video posters and so any YT videos in the gallery were automatically embedded into a slide when it was shown. Using the 'image' event (http://galleria.io/docs/api/events/#image) I could then detect if it was a video and hook into the YT player API.
Now that the video is initially a poster I cannot figure out how to detect when the player has loaded (after hitting the poster's play button) in order to manipulate it.

Play youtube video in fullscreen on button click on mobile browsers

I want to play a youtube video in fullscreen on click of a button. I currently have the following iframe:
<div class="youtube-trailer">
<iframe class="youtube-player" type="text/html" src="http://www.youtube.com/embed/whatever" allowfullscreen frameborder="0"></iframe>
</div>
On Safari Mobile, specifically, when a press the Play button the video launches in full screen which is the desired behavior. This is fine. I don't want the iframe displayed on the page though. I just want a button that will open the video in fullscreen using the native video player. i.e. i don't want to create an overly-elaborate lightbox to house the video.
Anyone have any ideas?
The standard youtube video link format is:
http://www.youtube.com/watch?v=Lv-sY_z8MNs
You can link directly to the full screen video (without opening a new window) by adding "_popup" after "watch" in the URL:
http://www.youtube.com/watch_popup?v=Lv-sY_z8MNs
This should work for both mobile and desktop browsers. Naturally, if you did end up wanting to open your link in a new page, simply add "target="_blank" to your opening anchor tag.

Categories

Resources