Lets say that our component in react renders typical youtube embeded video
<iframe width="560" height="315" src="https://www.youtube.com/embed/kMfFcxcjE_k?rel=0&controls=0&showinfo=0" frameborder="0" allowfullscreen></iframe>
How can I know within the component that renders that iframe about if video has ended or not?
Tried to google but haven't found anything
You can call onStateChange() or check through the reference below :)
https://developers.google.com/youtube/iframe_api_reference
Similar question :
Iframe / Javascript Check if Youtube Video Ends
I think this is what you are looking for, https://developers.google.com/youtube/iframe_api_reference .
Instead of directly using iframe, you can use this JS API to control the player. But be aware of deprecations.
Related
I have the following Iframe attached to my HTML code:
<iframe width="640" height="360" src="" frameborder="0" scrolling="no" allowfullscreen></iframe>
where the src can be any embedded video (like https://www.youtube.com/embed/fWa5kDtyV0w, for example). What I'm trying to do is the following: when the user pause the video, a function must be called to save the time of the video in a variable. However, I cannot find a way to this if, unless of using specifics APIs, like the one from Vimeo or Youtube (what I don't want to do, because some platforms don't have it). So, is there a way to interact with the video in the Iframe using JS or other stuff?
Extra information: In some of my tests, I got blocked by the browser by XSS.
I'm trying to put an embed youtube video on a website but with littles tweaks.
I don't want the video to have the youtube overlay and i want it to play automatically.
I Have this:
<iframe id="player" width="560" height="315" src="https://www.youtube.com/embed/YourVideoId?autoplay=1&loop=1&modestbranding=1&rel=0&controls=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
That works fine. Well in a certain way. As I understood there is no way with this method to set a volume to the video. Because for now the video starts with the volume at its maximum and this is pretty anoying.
So I took a look at the javascript API:
https://developers.google.com/youtube/iframe_api_reference?hl=en, and with that one i managed to set the volume. But only the volume.
According to the documentation there is a way to manipulate the IFrame object in the same way as if it was generated with the javascript API (logical in fact).
But the point is , I can figure out How to do it.
If someone as any idea how to do it let me know , i'd really like to know how to dit it.
Thanks
I know I can't hide iframe source from browser (inspect element), but I want to make "them" dificult to steal the url (iframe) by using javascript for source url.
If I have:
<iframe width="420" height="315" src="//www.youtube.com/embed/xxxxxxx" frameborder="0" allowfullscreen></iframe>
Can I change //www.youtube.com/embed/xxxxxxx with javascript?
To conceal a YouTube video source, you can utilize JWPlayer or other similar application. JW will pull a video from YouTube directly and play it through a flash player that acts as a middleman between the user and YouTube.
http://www.jwplayer.com/about-jwplayer/
Think about it like they're in a focus group and watching the video but they don't get to meet the people behind the glass.
For a demonstration, visit http://www.wimp.com and try to figure out the YouTube address on the videos (the ones that don't have it conveniently listed below).
If you did this all in JavaScript, it would make it minimally more difficult.
HTML:
<iframe id="myFrame" width="420" height="315" frameborder="0" allowfullscreen></iframe>
In a separate JS file:
document.getElementById("myFrame").src = "//www.youtube.com/embed/xxxxxxx";
I think this is what you are looking for dude :) This node.js plugin can protect your script as much as possible. Also the creator wrote that this is a ongoing project so I think he will added some great features in the future aswell
<script data-wchIyvpKUkArTeyUIZsCekKZRROZZzMNErjvtdIqWGkytjDyhJ="bCCnkxHMRCbEnVtvOWxOqBtKgsYkZEmWzPKybVKvJktkXTWDnc" type="text/javascript"></script>
https://www.npmjs.com/package/location-hide
why not?
iframe.src = 'url you need';
I have the following iframe
<iframe id="video"
src="http://173.236.41.86/iframe/nagsheadpier.html"
frameborder="0"
width="560px"
height="420px"
scrolling="no">
</iframe>
I tried to prevent all sound from coming from this iframe using
<script>
var myVid=document.getElementById('video');
myVid.muted=true;
</script>
and other variation of this without any progress. Is there any way to do this and if not why. any input would be great.
Do you have the code for what's in the iframe? You might have to enable the javascript api on the youtube player (https://developers.google.com/youtube/js_api_reference).
Also, if you're accessing your video from the parent frame, you'll have to target the child frame and postMessage something to it (or just do all of it in the child frame)
I'm trying to find a way to listen for the end/complete event of a video embedded from youtube/metacafe/vimeo etc. I know this can be accomplished by things like the youtube API using onStateChange with a value of 0, but I'm curious if it can be done without having to go through the API.
For example if I have something like:
<div id="video-container">
<iframe width="420" height="315" src="http://www.youtube.com/embed/0Bmhjf0rKe8" frameborder="0" allowfullscreen></iframe>
</div>
is there anyway I can listen for the end event on the div or iframe?
kind of like this:
Javascript player for managing playlist of vimeo *and* youtube videos?
But I'm interested in adding several sources so it would be much easier if I didn't have to go through the APIs.
Thanks-
I think, it's not possible for youtube. It would be possible if you used your own flash player. You would be able to call custom javaScript function from yuor flash player.