I want to embed a youtube video such that the user cannot do anything to change how the video is displayed. I don't want them to be able to pause, fast forward, rewind, or watch the video again. I am having troubles doing this.
I have gotten rid of the bar at the top and bottom and have tried to get rid of keyboard controls, but this has failed. Here is a list of my current issues:
There is a YouTube video that appears when the mouse hovers over the video. This takes you to the YouTube site. I don't want this to be available.
Even though I did "disablekb=1", you can still use the keyboard to control the video.
You can pause the video by clicking on it.
At the very end after the video is over, there is a bar at the top wherein the user can click on a link to the video in YouTube. I don't want this to be available.
Also at the very end after the video is over, you can click on a button to replay the video.
Here is my current code (using a YouTube video as a placeholder for the one that will actually be in there):
<iframe width="640" height="360" src="//www.youtube.com/embed/RMINSD7MmT4?modestbranding=0&autoplay=1&controls=0&fs=0&showinfo=0&disablekb=1&rel=0" frameborder="0"></iframe>
I did find a related post here, but I am not sure how to implement this. Plus, it only takes care of one of the problems.
If I can't do this what I want with YouTube, are there other sites that might work better?
Related
I’m developing a portfolio site that requires a custom Vimeo player, with a play button, pause button, mute button, timer, and progress bar.This website has a perfect example of what I would need (just with different CSS).
I’m assuming that within the Vimeo player for whatever video is embedded, there is a piece of data (please forgive/correct my terminology) that corresponds to the play state, pause state, volume, and time that the video has played, which I would then link to with a Javascript event to toggle each of those for the play, pause, and mute buttons. Though from poring over the source code of the above site, and searching for online solutions, I haven't been able to figure out where that information lives.
In short, does this seem like the simplest way to achieve the effect, and if so, how would I get access to the "play state"?
I have a quite specific issue regarding Chrome's new feature where they stop autoplaying videos.
On our site we wanted the page to load as quickly as possible, so only insert a new Vimeo embed object when a user has chosen to click to watch a video. Eg. the showreel on our homepage:
https://www.splinter.co.uk/
The problem arises because we use our own custom play button, so Chrome doesn't recognise that as a user-interaction, so it doesn't think that the user has chosen to view the video, therefore it blocks the autoplay option (which works fine in Safari).
I wondered if anyone else has had this problem, and if anyone can think of a workaround?
Thanks!
On the VOD home page of Vimeo you can find a technique that is used for a case like this. https://vimeo.com/ondemand
You can preload the Vimeo player when the user hovers over your custom play button so that at the time they click the Vimeo player.js API can be used to initiate playback. player.play()
If that is not sufficient it might be needed to load the player on page load and just keep it hidden, on the button press reveal the player and use the API to initiate playback.
I'm currently making a movie site that has a main splash screen with a "play trailer button".
When the play trailer button is pressed I would like the iframe to be shown & the video to to be played.
I also need a close button that will pause the video, return to the beginning of the video and then hide the div.
<!--hidden by default-->
<iframe class="player">player goes here</iframe>
<!--shows 'player' and initiates start-->
<div id="play_button">Play</div>
<!--stops the video, returns to the start and hides the 'player'-->
<div id="close_button">Close</div>
I can easily manipulate the css for the video itself however I'm having difficulty using the youtube api.
Any help would be appreciated :)
You will need to load your player via the api first so that it is loaded with the page.
https://developers.google.com/youtube/iframe_api_reference
Then you can set it to load in "PAUSE" state or load it with "cueVideoById".
Then have a floating dive with graphics and button placed over the video.
After that, you just need scripts that will play, hide div and put dive back again ( or what ever end result you want).
I think this should work for you.
I am using MediaElement.js to allow me to block the standard Youtube controls on my embed to prevent users from skipping through a video. However, when you double click on the video, it gets pulled to fullscreen and then there are video controls when in fullscreen.
Basically I just want to make my users watch the video to it's full extent, but right now, all the user has to do is doubleclick the video and then use those controls to skip ahead in the video.
Does anyone know of how I can disable the doubleclick? I have thought about just blocking users from clicking on the video, but then they can't exit out of ads or use the handy click-to-play/pause.
Thanks
Ok so to start, I have a php webpage that pulls info from my mysql database and populates a page of videos. These videos are displayed in a vertical accordian initally you see the thumbnail and when clicking the thumbnail it expands (accordian effect) and shows the video and plays the video and then when clicking on a new tab the previous video stops playing.
I know this can be done and I almost got it working using the google apis but it didnt work 100%
Here is the jsFiddle to see what I am talking about, I am pretty sure if I can figure out how to make this work I can then figure out how to make it work with my php, but where i got stuck last time is where if open section 1 i want the video only in section 1 to play and when i open another section i want the previously oppened tab to stop playing and play the new one.
HOpefully this makes sense
http://jsfiddle.net/mxDbn/1/
There was no solution for youtube as the API was not involved enough, or I could not figure it out, but rather to embed with flash when falsh was available and because of how videos operate on mobile devices I wouldnt have to worry about html5 playing when it was not on screen because if the video is not seen it will not play.
Vimeo did however offer a javascript api function to stop playing the video when the next page was clicked.