How to stop youtube video when click on a link? - javascript

I've been googling for a while but i didnt get any good results for my problem. I also ready many times the youtube api reference from gdocs.
Im trying to stop a youtube video by clicking on a link.
html:
<div class="box_filme rel_trailer">
<iframe id="iframe_player" width="420" height="315" src="http://www.youtube.com/embed/8Af372EQLck?enablejsapi=1&version=3&playerapiid=ytplayer" frameborder="0" allowfullscreen></iframe>
</div>
script src:
<script type="text/javascript" src="http://www.youtube.com/iframe_api"></script>
js code im trying:
$(function(){
$('.info_filme .filme').click(function(){
$('iframe_player').stopVideo();
});
});
part of the html that the clicks are placed
<ul class="info_filme">
<li><a class="filme sinopse active" data-info="rel_sinopse">Sinopse</a></li>
<li><a class="filme trailer" data-info="rel_trailer">Trailer</a></li>
<li><a class="site" href="">Site</a></li>
</ul>
In fact I had success calling the url link from js but i have to use iframe and i don't know what im doing wrong.
If someone could help me i'd be very grateful.

The problem is that you're calling .stopVideo() on a jQuery object, not on a YouTube player object. The YouTube API does not export its control functions to the iframe element, and certainly not to jQuery.
Rather than creating the iframe yourself, try letting the YouTube API do it for you, as in the basic example in the YouTube iframe API docs.
var player = new YT.Player($('.rel_trailer')[0], {
height: '315',
width: '420',
videoId: '8Af372EQLck',
events: {
'onReady': function() {
$('.info_filme .filme').click(function(){
player.stopVideo();
});
},
'onStateChange': onPlayerStateChange
}
});
The first parameter that gets passed to YT.Player is the DOM element in which you want YouTube to put the video.
The YouTube API gets a bit tricky, since a lot of what it does is asynchronous. If you want something a whole lot easier, Popcorn.js can wrap a YouTube player in an API that mimics a HTML video element (as I describe in this answer).
You need to load up these scripts:
<script type="text/javascript" src="popcorn.js"></script>
<script type="text/javascript" src="popcorn._MediaElementProto.js"></script>
<script type="text/javascript" src="popcorn.HTMLYouTubeVideoElement.js"></script>
You can get them here, here and here. (This repo is a few bug fixes ahead of the official Popcorn repo for YouTube.)
Next, just provide an empty element for the video.
<div class="box_filme rel_trailer"></div>
Now, create the wrapper and attach the click handler.
var video = Popcorn.HTMLYouTubeVideoElement($('.rel_trailer')[0]);
video.src = 'http://www.youtube.com/watch?v=8Af372EQLck';
$('.info_filme .filme').click(function(){
video.pause();
});
Popcorn will handle loading YouTube's API and all the asynchronous events that follow. It's a fair amount of unnecessary javascript to load if you're not going to use Popcorn's main annotation functions, but it'll save you a lot of time if you don't want to be bothered mucking about with YouTube's API. And you'll be able to easily adapt the code if you want to have vides from multiple sources (e.g. HTML5, Vimeo).

Why don't you embed the video into your page like below?
<embed id="playerid" width="100%" height="100%" allowfullscreen="true" allowscriptaccess="always" quality="high" bgcolor="#000000" name="playerid" style="" src="http://www.youtube.com/apiplayerbeta?enablejsapi=1&playerapiid=normalplayer" type="application/x-shockwave-flash">
You can then stop the video using:
var myPlayer = document.getElementById('playerid');
Stop Video

Related

Trying to use a embedded youTube link for auto play in custom HTML

I am trying to implement a embedded youTube link to a custom Html page and setting it to autoplay but as I open my Homepage video doesn't play and only played when clicked .
<iframe width="1560" height="415" src="https://www.youtube.com/../?autoplay=1"
frameborder="0" allowfullscreen></iframe>
I want to make it responsive.
I'm not sure if this helps or even works but have you tried something like this?
$(document).ready(function() {
$(iframe).click();
});
You said https://www.youtube.com/../?autoplay=1
Get rid of that slash before the question mark
I think it should be https://www.youtube.com/viddata?autoplay=1 instead.
Maybe thats why its not playing
Get rid of the slash in the URL like Coder2195 said (https://www.youtube.com/viddata?autoplay=1). Also try to add this script to the HTML file:
<script>
window.onload = function() {
var videoElement = document.getElementById("videoElement");
videoElement.click()
}
</script>
And make the iframe element have a custom id:
<iframe id="videoElement" width="1560" height="415" src="https://www.youtube.com/../?autoplay=1" frameborder="0" allowfullscreen></iframe>

How can I remove the youtube video controls using javascript?

I'm working on an extension and I need help to remove the video controls and replace it with the native browser controls.
This is what I have
document.getElementById("(*YOUTUBE CONTROLS*)").innerHTML = "<video controls>"
You can hide youtube controls with ?controls=0 after src
ex:
and some more customization.
To reskins the player you can write a custom jquery of js function to edit the content of the frame after it's loaded.
Here's and example
HTML
<iframe width="800" scrolling="no" id="prev" src="">your browser needs to be updated.
</iframe>
jquery
$(document).ready(function() {
$('#prev').contents().find('body').html('<div> blah </div>');
})

Vimeo iframes for Toolset Post Archives

Essentially the Iframe from the Vimeo embed link does work individually, however, I am working on a global editor for displaying all posts. using javascript seems to be the only answer, but if someone knows a way to use a simple <video></video> tag with a Vimeo URL let me know.
Here is what I have
[wpv-post-date]
[types field='date'][/types]
[types field='bible-passage'][/types]
[types field='mp3'][/types]
<div class="audio-player"><div id="play-btn"></div><div class="audio-
wrapper" id="player-container" href="javascript:;"><audio
id="player"><source src="[types field='mp3' output='raw'][/types]">
</audio></div></div><a class="x-btn black-button x-btn-global sermon-
button sermon-audio" href="[types field='mp3' output='raw'][/types]"
target="_blank">Download</a>
<iframe src="https://player.vimeo.com/video/229578292?
title=0&byline=0&portrait=0" width="640" height="360" frameborder="0"
webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<p>You Shall Not Steal
from <a href="https://vimeo.com/tomballbible">Tomball Bible
Church</a> on Vimeo.</p>
[wpv-post-featured-image]
[types field='sermon-image'][/types]
[wpv-post-taxonomy type="preacher" separator=", " format="link"
show="name" order="asc"]
The first source for the Vimeo player needs to remain in that format however the number at the end needs to change.
The "video" field has the auto-generated URL already so maybe I could pull the number from that? I am not familiar with java script.

Insert YouTube player with JQuery HTML

I'm almost done with my mini-project which I have put a lot of work into! The only thing is now that I need to put a Youtube link player into the HTML and I don't really now how to start.
So what I'm doing is that I take information from my API where its already have a YouTube link ready for example https://youtu.be/Mh2ebPxhoLs and now I need it to be shown in my HTML as a YouTube player. Only problem I don't really know how to start it.
This is how my site looks right now:
As you see there is a YouTube trailer link at the bottom which I haven't got to that "level" yet and need your help for it!
Basically its a trailer from the movie I'm searching for and I want it to be under the poster, somewhere there but I can do it by myself. Only problem is now I just need to know how to make a YouTube player to understand the YouTube link.
Right now I'm using in my HTML a
<div id="trailer"></div>
JS:
$('#trailer').html("Trailer: " + data.trailer);
and I have no CSS for the trailer yet.
So I just want to know, how can I make the link understand and fill my HTML with the YouTube player?
From what I understand you want to get the id from the link and use that to fill the html with the youtube iframe. You can do this by using replace.
var videoId = data.trailer.replace("https://youtu.be/", ""); //Leaves just the id
$('#trailer').html("Trailer: <iframe width='420' height='315' src='https://www.youtube.com/embed/" + videoId + "' frameborder='0' allowfullscreen>");
Take an iframe for HTML
<iframe id="videoArea" width="350" height="250" src="http://www.youtube.com/embed/X0DeIqJm4vM" frameborder="0" allowfullscreen></iframe>
Then with your links you can create a property mapper to the iframe:
$('#videoArea').prop("src", data.trailer);
DEMO

embeded custom google map wont display without refresh

I built 2 custom google maps for a site and have embeded them with iframes on a mobile site: mobile.moodyplumbingmpi.com The maps do not display the custom map but a map of the Southern Hemisphere when first viewed by taping service areas. If I hit refresh, the correct maps display. Wondering if I am missing some sort of jquery command to display on opening or something like that. I am completely stuck on this. Any help would be greatly appreciated! Mike
Here is the code for the section that displays the maps:
BackMoody Plumbing
<article data-role="content">
<h2>Moody Plumbing Service Area</h2>
<ul data-role="listview" data-inset="true" data-filter="false">
<li>
<h3>Warren Service Areas</h3>
<iframe width="250" height="250" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://mapsengine.google.com/map/embed?mid=zaIx6P-nAOUk.kQ2ZNNmaryIQ"></iframe><br /><small>View Larger Map</small>
</li>
<li>
<h3>Youngstown Service Areas</h3>
<iframe width="250" height="250" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://mapsengine.google.com/map/embed?mid=zaIx6P-nAOUk.kkUe66oIEZgU"></iframe><br /><small>View Larger Map</small>
</li>
</ul>
</article>
<nav data-role="footer">© <script>new Date().getFullYear()>2010&&document.write(+new Date().getFullYear());</script> Moody Plumbing Visit Full Site
</nav>
So your issue is that the iFrames containing the maps are being built while they are hidden. This confuses the Google MapsEngine API which expects the viewport window to be properly sized and visible. When you toggle the iFrame's visibility from the "Service Areas" button, the MapsEngine just plunks down at zoom 1 at lat/lng 0,0.
I think one solution is to dynamically re-set the SRC of the iFrames when the "Service Areas" button is pressed. Change the two iFrame tags to include a unique id:
<iframe id="location1" width="250" height="250" ...
<iframe id="location2" width="250" height="250" ...
Then add a simple script into the HEAD of the HTML document; I didn't think of this, it came from: Reload an iframe with jQuery
<script type="text/javascript">
$(document).on("pageshow", "#locations", function(event, data) {
$('#location1').attr('src', function(i, val) { return val; });
$('#location2').attr('src', function(i, val) { return val; });
});
</script>
The reload is a bit jumpy. So other possible options to consider include:
dynamically trigger a refresh of the iFrames when the "Service Areas" button is pressed; there is code online for this but it does not appear to work in all types of browsers.
Put a couple of DIVs in as placeholders, then use javascript to insert the iFrame HTML as innerHTML of the DIVs.
Find a way to trigger a map RESIZE event [google.maps.event.trigger(???, "resize");] similar to one of the answers in the following link; I don't know if this is possible using the MapsEngine: google maps not displayed correctly unless refreshing
You do need to make sure about the timing of events. The #locations SECTION needs to be completely visible before attempting any of the above to allow the MapsEngine initialization to work properly. You will need to set an event to know when the SECTION has become visible before poking at the iFrames (the jQuery pageshow event does this as provided in the code sample above).
Finally, I'm not sure if you built the maps using Google's MyMaps or using Google MapsEngine. If you indeed used MapsEngine, you need to be aware that Google is terminating the MapsEngine at the end of 2015, and these two maps will become non-operable.

Categories