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
Related
I have an Apple podcast embed on my page wherein I need to add some code for analytics tagging based on clicks on play and pause buttons. I have achieved this for Spotify embed using their iFrame API however Apple podcasts don't seem to have one.
As a workaround, I am trying to find a way to access the play and pause buttons inside the iFrame and trigger a click event and add the code. Because of the cross-domain policy, the following code doesn't return anything -
this.iframeAppleWidget = this.$el.find('iframe');
console.log(this.iframeAppleWidget[0].contentWindow.document); // Empty
My HTML code looks like this -
<iframe class="apple-podcast-small" title="Test Podcast" style="margin: 0 auto; display: block;" src="https://embed.podcasts.apple.com/us/podcast/how-to-learn-web-development-skills/id1412209136?i=1000554938051&itsct=podcast_box_player&itscg=30200&ls=1&theme=auto" width="80%" height="166" frameborder="no" scrolling="no"></iframe>
I'm trying to add a click event listener to a button element inside the #document (iFrame DOM) and add some code.
After doing a lot of research, I found Window.postMessage() as a suggested solution however I'm unsure of whether it can help as I'm not trying to send any message from one window to another.
Could you please point me in the right direction?
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
Long story short: (tried looking this up to no avail; maybe not wording it right? newbie here).
I'm working on a mobile-friendly webpage. On this webpage is a button. When you click said button, it takes you to ANOTHER webpage with a video on it.
The desired effect I'm looking for is when you click on the button, it doesn't take you to the new page, but rather opens up the video on the spot.
Is this achievable? Thank you in advance.
I have created a jsfiddle, see below, so that if you click on the button, it loads the video without bringing you to a new page as you requested.
http://jsfiddle.net/yb6s7fud/
Here is the jquery code I used:
$(document).ready(function () {
$('button').click(function () {
var video = '<iframe src="https://www.youtube.com/embed/koJlIGDImiU?autoplay=1"
frameborder="0" allowfullscreen></iframe>';
$("#video").append(video);
});
});
Hopefully this is what you are looking for.
With youtube you can easily open the video in a modal box.
With other webiste you can open a iframe modal with the entire page content. You can affect iframe with jquery to take only the video only if the other page is the same domain.
Have you tried creating a container with the right properties so inside you can place an iframe? The button should be the anchor to the iframe source.
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.