I need to make a video autoplay with sound when visited via a deeplink.
According to https://developer.chrome.com/blog/autoplay/, it is not allowed, because the video is NOT muted.
However, if you open a Youtube video in a Guest Chrome tab (meaning Media Engagement Index is empty and doesn't matter here), it autoplays, and it has sound.
That means Youtube bypasses the Chrome policy, is that correct? I saw other websites do the same as well.
I am wondering how to do the same in my app. Could anyone teach me?
Note: the video in my app is from a 3rd party and is embedded in my app, that means the video's URL has a different domain from my app's. But I think it shouldn't matter.
Thanks in advance!
I've managed to cast a LAN hosted dashboard page to the chromecast, using https://boombatower.github.io/chromecast-dashboard/sender/.
However, the HTML5 video tag will not play without the muted attribute (and trying to unmute causes it to pause). Here is the error: "Unmuting failed and the element was paused instead because the user didn't interact with the document before". It has to do with Chrome policy, of course.
Is there any way to cause interaction with the Chromecast to perhaps allow unmuting? I've tried to press the pause button on my TV to send an event via CEC (it works on the media controller), but the videos still get muted.
I figured it out. I need to mark the video element using the chromecast api. So I had to create my own Cast app.
There isn't a way to do this with the given dashboard app. It wraps the user's page inside an iframe, and there is just no way to access the chromecast api from inside.
I'm trying to embed a youtube livestream chat onto a webpage on my website,
<iframe allowfullscreen="" frameborder="0" height="270" src="https://www.youtube.com/live_chat?v=hHW1oY26kxQ&embed_domain=localhost" width="480"></iframe>
I'm trying this, but the chat doesn't show up at all, if tried doing embeded domain using a real domain I own, but that doesn't work either.
It seems to me that YouTube disabled the feature to embed a live chat on external websites, but then forgot to update the documentation. Or alternatively, there could be an unfixed bug that broke this feature.
2021 update: chat embedding works again. Uses the same syntax as before. As per a helpful comment below.
Details
The YouTube knowledge base still says that embedding a live chat iframe into an external website is still possible, using a URL like the one you posted (see here, in section "Embed Live chat").
However, when trying that and looking into the browser's console, you will see a message like this:
Refused to display 'https://www.youtube.com/live_chat?v=12345&embed_domain=example.com' in a frame because it set 'X-Frame-Options' to 'sameorigin'.
You can also see that x-frame-options: SAMEORIGIN header in the "Network" tab of the browser's developer tools when looking at the response to the https://www.youtube.com/live_chat?… request.
This means that YouTube does not want a browser to embed this into an iframe except when embedded on youtube.com itself. (On YouTube itself, this embed code still works: when you inspect the source code of any currently streaming live video on YouTube, you will find that the live chat window there is made with that same /live_chat?… request, in an iframe.)
Additional indications that this feature has been removed:
The YouTube documentation mentions:
The Live chat module only exists on the YouTube watch pages — it does not follow embedded players. (source)
I believe that's the new part of the documentation, and the section "Embed live chat" further down is outdated.
This tutorial from 2016 uses the documented URL format to embed an example live chat near the bottom, and it now shows the same "Refused to display […] in a frame because it set 'X-Frame-Options' to 'sameorigin'." Assuming that this worked in 2016, something must have changed on YouTube's side.
This Reddit thread tells how somebody's embedded live chat suddenly stopped working in early September 2018 – so shortly before this question got asked.
Alternatives
You could use the YouTube Livestream API, in particular the LiveChatMessages endpoint, to get and create chat messages. There are probably open source libraries around to help with this. So far, I found this one (able to display but not create chat messages).
You could embed your own chat, either installed on your own server or a cloud-hosted livestream chat solution. This solution can also provide features that YouTube live chat does not provide, such as allowing anonymous visitors to post.
You could reverse proxy the https://www.youtube.com/live_chat?… URL, forwarding YouTube's response but with the X-Frame-Options header removed.
If you only need a solution for one or a few computers, you could use a browser extension to remove the X-Frame-Options header from YouTube's response. See this question.
This appears to have to do with the introduction of this change to iframes, at least when I had this issue.
To fix this, I would suggest the use of a script like the following:
<script>
let frame = document.createElement("iframe");
frame.referrerPolicy = "origin";
frame.src = "https://www.youtube.com/live_chat?v=VIDEO_ID&embed_domain=" + window.location.hostname;
frame.frameBorder = "0";
frame.id = "chat-embed";
let wrapper = document.getElementById("chat-embed-wrapper");
wrapper.appendChild(frame);
</script>
Where chat-embed-wrapper is the parent of the iframe with the id chat-embed and VIDEO_ID (in the frame.src assignment) is the id of your target video. You'll have to modify this a little for your setup, but this is the general case solution.
Simple solution for Angular :
HTML part :
<iframe frameborder="0" height="470" [src]="url" width="780"></iframe>
TS part :
constructor(private sanitizer: DomSanitizer) {}
ngOnInit() {
this.url = this.sanitizer.bypassSecurityTrustResourceUrl('https://www.youtube.com/live_chat?v=[YOUR_LIVESTREAM_ID]&embed_domain=' + window.location.hostname);
}
I'm not sure if you got this working in the end? We have managed to get it working on our site using this iframe, hope it helps you:
<iframe src="https://www.youtube.com/live_chat?v=YourVidCodeHere&embed_domain=www.YourDomainHere.com"width="100%" height="600"></iframe>
I hope that helps:) PS it doesn't work on mobile (YouTube said they have removed this feature from mobile), but it does work on desktop and tab.
Best wishes.
I can confirm this indeed works. However, I received the same X Frame error when embed_domain had the value "example.com" even though the url of the page started with "https://www.example.com". i.e. ensure the value matches window.location.hostname. Addison Crump's workaround could work for this if you do not have canonical host redirection working.
Recently Google Chrome made the changes that by default the following permissions cannot be requested or used by content contained in cross-origin iframes:
Geolocation (getCurrentPosition and watchPosition)
Midi (requestMIDIAccess)
Encrypted media extensions (requestMediaKeySystemAccess)
Microphone, Camera (getUserMedia)
So we have to use the allow attribute with iframe like below:
<iframe src="https://example.com" allow="geolocation; microphone; camera"></iframe>
I want to know how it will effect in case if I use Object tag instead of the iframe?
Thanks in advance.
I would like to embed a youtube video (with the standard iframe). Can I ensure that the video is played in the youtube app, if it is clicked on using a smartphone?
For completeness my video including code (using bootstrap 3.3.1.):
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/<?php echo $Elem->video; ?>">
</iframe>
</div>
Thank you
I'm just trying to do the same thing and I can tell you that there is no native way to specify that behaviour as a parameter.
The only workaround (I'm still trying to implement it) is to use YouTube's Player API for iframe. I think you should use that API to embed the video on the webpage and add a listener to the first "play" event, in that event you should check if the user is using a mobile device (using another JS library to check that) and stop the playback (the stop() API call will also stop the loading of the video file) and then redirect the user to the video URL (like youtube.com/xxxxxx). At that time, at least in Android, the user will be asked to open the link in the browser or the YouTube app. I think most user have the app as the default option.
That's the idea, I'll try it and if it works will edit this response with the code I've used.
This is the link where you can read about embedding the player, it's events and API calls: https://developers.google.com/youtube/iframe_api_reference#Loading_a_Video_Player