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.
Related
I am using the Impreza Wordpress theme. To a page on my site, I added a popup modal element which contains an embedded iframe YouTube video. When I add ?autoplay=1 to the iframe src url, the video autoplays as expected when I open the modal popup, but when I close the modal popup, the audio replays even though the modal popup and video are no longer open/visible.
I'm trying to accomplish something like this: Youtube Video Still Playing When Bootstrap Modal Closes. My Javascript skills aren't strong enough to figure out how to apply the Bootstrap modal solution to this situation.
Here's the HTML I put in the popup modal element (Stack Overflow video for example purposes):
<div class="responsive-video">
<iframe class="myEmbed" title="YouTube video player" src="https://www.youtube.com/embed/HJtJXMKpl2g?autoplay=1" allowfullscreen="allowfullscreen" width="1024" height="565" frameborder="0"></iframe></div>
Any suggestions would be greatly appreciated!
I have Microsoft stream video iframe embed on html page pop-up modal. The video is displayed on Modal pop-up when a button is clicked and plays with default controls. When i close the modal pop, the video still runs on the background. I need to stop/pause the video when the modal pop-up is closed. I have tried with JavaScript video pause scripts but nothing works out. Streams runs with Azure player, Any suggestion to control the video with 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.
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
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