Prevent iframe playing youtube video - javascript

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

Related

Autoplaying a full screen YouTube video on button press with JQuery

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.

Embed YouTube video quickly by pasting URL into webpage?

I am watching football videos and collecting data, I have set up a webpage that plays the video in the middle of the screen while I click scroll buttons of different aspect of the game, at the end I submit the data into a database.
At the moment I am just pasting the URL into the code and refreshing the page.
I want an easy way to paste an embed URL into a text box in the same webpage and the video will load in the iframe automatically (without the need to click a submit button, something like onpaste function, if it exists), I assume some javascript may need to be used.
I don't want to go away from the page (even for a few seconds - the task is tedious enough), I have a list of games I want to watch and with URLs ready to be pasted.
Is there a way to do this?
Edits
1. This is a typical URL with the iframe info
<iframe width="950" height="534" src="https://www.youtube.com/embed/xouOxFziuIk" frameborder="0" allowfullscreen></iframe>
also I am not experienced with Javascript so I have not tried anything.
The iframe (because of the way the page is set up) is inside a form tag

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.

Pause youtube and vimeo programatically and detect if a video is playing

I have a slider which allows video embeds ( currently by pasting in iframe code from youtube/vimeo etc). The problem I have is that the video needs to pause the slider when the user clicks the video play button and also pause the video when the slider moves to the next frame.
It seems that I will need to use the vimeo and youtube API's to get access to the information and control I want. I have looked through the API's and I think I can probably get this happening; however my problem is that from what I've seen so far the youtube API tends to work off the video ID, whereas the Vimeo API seems to work with iFrames, but I need to have a consistent input for end users in that I want to say "Paste the video ID here" OR "Paste the Iframe here" OR "Paste the video URL here" ... I don't want to have to ask them for an ID from youtube for one video and an Iframe from Vimeo for the next one.
I know how to manipulate the data to make the two consistent but I'd rather avoid that if at all possible. What is the best approach to get programatic access to Youtube and vimeo so that I can achieve access to play and pause and know whether a video is playing or not.
there is a small widget on https://github.com/dachcom-digital/jquery-video with which you can archive the things you're asking for.
You can ask the user for the video ID and render some HTML container. Then you apply the widget and can pause, play, etc. the videos with one consistent API.
Hope this helps.

Open Youtube video in a new window?

I am using the following html to embed youtube window in page,
<iframe src="http://www.youtube.com/embed/VIDEO_ID" width="320" height="190"></iframe>
Is it possible that when I click the play, it should redirect me to the youtube page.
I use another div to cover the real iframe element. So when user click on the place they think the iframe, the div onclick event is fired.
You can see a demo here http://jsbin.com/uhajun/2/edit

Categories

Resources