Mute youtube video that has to be embedded via HTML iframe - javascript

Problem
I'm working with a site where the developer coded an embedded youtube video to change via a script altering the iframe's src tag.
I need to mute this element, and while I'm aware that a few libraries allow me to embed a video via script with the option of muting, I'm unaware of any way to use those methods without having to rescript everything that has been done on the youtube player. What's the best option here?
element
<iframe id="tv" width="100%" height="100%" src="http://www.youtube.com/embed/9NFUgVa68hw?autoplay=1&rel=0&controls=0&showinfo=0&disablekb=1&iv_load_policy=3&modestbranding=1" frameborder="0" allowfullscreen></iframe>
script
var channel1 = "http://www.youtube.com/embed/dFU6Cy4Hd5A?autoplay=1&rel=0&controls=0&showinfo=0&disablekb=1&iv_load_policy=3&modestbranding=1";
$("#channel-1").click(function(){
$("#tv").attr("src", channel1);
$(".mid-bar").text("TNT");
});
The above is just one module of the script; there are 22 channels.
Again, I'm trying to mute the embedded video without having to rescript the src changes. How can this be done?

I understand you don't wish to change the src, however, if you append enablejsapi=1 you can then use javascript to mute the video by calling object.mute()
Reference: https://developers.google.com/youtube/js_api_reference#Playback_controls

Related

Activate Autoplay based on allow="autoplay" attribute in iframe - Google Autoplay Policy

I really tried to find an answer but couldn't.
Google have changed their Autoplay Policy .
I am loading an iframe with Src to independent code, like this:
<iframe frameBorder="0" scrolling="no" allow="autoplay"
src="myurl"
width="640" height="480">
</iframe>
myurl is a path the a video player.
I want to check if 'allow="autoplay"' was passed as iframe attribute where the player code is, and the decide if to set auto play or not.
Note, that the site where the iframe is loaded is a different site' with different code and it even sites on a different server then the myurl site.
How can I do it?
It can not been done.
You need to use a promises to check if the auto play succeeded.
I used googles way of doing it.
Hope it will saves some time to someone :)

Displaying the video in the TinyMCE editor

Good afternoon, I will explain the problem in details. I'm connecting the TinyMCE editor version 4.6.4 to my site. It has plugins in the Media plugin through which you can insert media files into the editor.
Thus, I add video to the editor. Actually, you can add a video in different ways, and one of them is to give the editor a direct link, and I do so.
There is a parameter media_live_embeds in the initialization of the editor, which can be inserted into the position true or false, and if the parameter is inserted into true, then, the added video can be played directly in the editor.
The problem is that if I give a link to a video from my site (vvv.mp4 example), then, it does not play (as if the parameter is inserted in media_live_embeds: false).
But if for example I add a video link from youtube (example https://www.youtube.com/watch?v=q6_yRWPd4Yc) then it works.
Here on the screen there are 2 videos, the first one with youtube link, and the second with a link from the site, the first one is played directly from the editor, and the second one is not.
What's my mistake? Who had this problem?
Here is the editor, you can test yourself.
The name of the property is media_live_embeds so this will permit to played directly in the editor embeds media. When you insert a video URL, tinyMce construct embed video code integration :
<iframe width="560" height="315" src="https://www.youtube.com/embed/LIMYj5mpMM4" frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen></iframe>
But when you insert a video from your website without create a url access to content video or from local files, tinyMce will create a html element : <video><video>. So you couldn't play it in the editor since it wasn't and embeds media url.

Is it possible to only remove the "watch later" and "share" buttons from youtube iframe embed player

How can I remove the watch later and share buttons from youtube iframe embed player. Using the following embed code for embedding video clips.
<iframe width="854" height="480" src="https://www.youtube.com/embed/cPVgwz5aN1o" frameborder="0" allowfullscreen></iframe>
Using showinfo=0 removes the full Header which also contains the Video Title.
Is it possible to only remove "Watch Later" and "Share" buttons from the header?
Using YouTube embed's privacy-enhanced mode (youtube-nocookie), it will hide "Watch later" button, but not "Share" button.
<iframe width="854" height="480" src="https://www.youtube-nocookie.com/embed/cPVgwz5aN1o" frameborder="0" allowfullscreen></iframe>
This parameter is deprecated and will be ignored after September 25, 2018.
As an example, this is what you're trying to do:
document.getElementsByTagName('iframe')[0].contentWindow.getElementsByClassName('ytp-watch-later-button')[0].style.display = 'none';
But, short answer, there is no simple way to do this, because YouTube is on a different domain:
'Not possible from client side . A javascript error will be raised "Error: Permission denied to access property "document"" since the Iframe is not part of your domaine...'
https://stackoverflow.com/a/30545122/2488877
Though, you might find an answer suitable to your needs if you're tech-savvy in the answers to the question above.
I don't think it is possible with the iframe method.
My reasons for thinking that is:
It is not an option listed on their parameters page
I found this thread where a member of their team said it was not possible at the time (2012), and they had no plans to add the ability.
You could probably achieve something similar by turning showinfo off, and using the other methods to grab the video title.
Add this line after link
https://www.youtube.com/embed/c5cHjtspa7M?mode=opaque&rel=0&autohide=1&showinfo=0&wmode=transparent
It will disable the share and watch later option
showinfo
Note: This parameter is deprecated and will be ignored after September 25, 2018.
Supported values are 0 and 1.
Setting the parameter's value to 0 causes the player to not display information like the video title and uploader before the video starts playing.
If the player is loading a playlist, and you explicitly set the parameter value to 1, then, upon loading, the player will also display thumbnail images for the videos in the playlist.
https://developers.google.com/youtube/player_parameters
In the url params put the params : showinfo=0.
Like this : https://www.youtube.com/embed/youidvideo?autoplay=1&rel=0&showinfo=0
It will remove share and watch later button!
Use a url query string ?controls=0 to control what is shown:
<iframe
src="https://www.youtube-nocookie.com/embed/j8xbAwurfgo?controls=0&rel=0&modestbranding=1&origin=https://key.bio"
frameborder="0"
allow="encrypted-media;"
allowfullscreen>
</iframe>
YouTube Player API Reference for iframe Embeds
https://developers.google.com/youtube/iframe_api_reference
Note: this only worked for me on Chrome, not Firefox! Took me a while to figure this out because I use FF for webdev

How to change the src of an iframe to an embed src within an iframe?

This may sound a bit confusing at first but I will try to explain. I am trying to access the code of an embed tag playing a youtube video inside an iframe and have it change the src on an outside iframe when the inner embed container is clicked.
note:the external frame is a full website in the background of the myframe player. myframe is a mock video player.
heres the basic way the document is set up
<body>
<iframe id='myframe' src='something.htm'></iframe>
<iframe id='externalFrame' src='external.htm'></iframe>
</body>
//external.htm
<body>
<embed id='mediaPlayer' src='somethingElse.htm' >
</body>
external javascript
var myPlayer=document.getElementById('myframe');
var externalFrame=document.getElementById('externalFrame');
externalFrame.contentWindow.document.getElementById('mediaPlayer').onclick=function(){
var mediaPlayer=externalFrame.contentWindow.document.getElementById('media_player');
myPlayer.src=mediaPlayer.src;
}
For the record I hate iframes with the passion of 1000 suns, and would never use them usually but for this the media player has to keep playing when the page changes. and Iframes are good for mimicking that.
That should work fine just make sure that the link to the src is directed to the correct place in the structure.

Using javascript to click an embedded youtube video

I'd like to click on an embedded youtube video using javascript (so the video plays automatically). I successfully simulated a click on a <div> like this:
function f(){
alert("hello");
}
<div id="someid" onmouseup="f();">
my text
</d>
document.getElementById("someid").onmouseup();
How can the above code be adapted to work with an embedded youtube video?
Just add &autoplay=1 to the link of the video in the <embed> tag.
If he does what you suggest the views on the embedded video won't count. I'm pretty sure he is asking his question because he is trying to find a way to get the video to autoplay and have youtube count the views at the same time.

Categories