Youtube Live Chat in Iframe (without API) - iframe

How is it possible to put the Youtube Live Chat into an Iframe?
I have this URL, but for me it does not work:
<iframe allowfullscreen="" frameborder="0" height="270" src="https://www.youtube.com/live_chat?v={VIDEO_ID}&embed_domain={MY_DOMAIN}" width="480"></iframe>
If I open the URL normally in the Browser, I get the chat, but in the Iframe i get nothing.
Please help. Thx :)

You may need to have embedding enabled first, you can check the status of your account at this link after you're logged in the youtube account: https://www.youtube.com/features
Also the domain part (MY_DOMAIN) needs to be without the 'https://' or 'http://' and port numbers like ':3000'

It says it's possible, but only on Desktop browsers:
Note: embedding live chat isn't available on mobile web.
During a live stream, you can embed live chat on your own site by
using an iframe.
Get the video ID for the live stream. You can get the video ID from the watch page URL (youtube.com/watch?v=12345). In this case, the video ID is ‘12345’. If you chose "Stream now," right-click on the player and select Copy video URL to get the video URL.
Get the domain URL for the site you want to embed chat on. If you're embedding chat on www.example.com/youtube_chat, your embedding domain is "www.example.com."
Combine the embedded URL in the following way: https://www.youtube.com/live_chat?v=12345&embed_domain=www.example.com
This is the URL for your iframe. Note the embed_domain must match the URL of the page you’re embedding the chat on. If they are different, the embedded chat will not load.
https://support.google.com/youtube/answer/2524549?hl=en
I made an example with:
<iframe width="560" height="315" src="https://www.youtube.com/embed/5qap5aO4i9A" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="185" height="315" src="https://www.youtube.com/live_chat?v=5qap5aO4i9A&embed_domain=fiddle.jshell.net" frameborder="0"></iframe>
Which looks like this:
View the working demo here:
https://jsfiddle.net/kmturley/9Lmbdgn2/8/

Related

Youtube iframe fullscreen

hope everyone is ok.
I need to build a page in our company's website where we're putting some videos of our production.
The problem is, i can't seem to find a way to make the videos available in fullscreen mode for the visitors.
I've done pratically every solution that i've found, but none seems to work. I've done:
<iframe allow="fullscreen;">
---
<iframe src="your_page_url"
allowfullscreen="allowfullscreen"
mozallowfullscreen="mozallowfullscreen"
msallowfullscreen="msallowfullscreen"
oallowfullscreen="oallowfullscreen"
webkitallowfullscreen="webkitallowfullscreen">
</iframe>
---
allowFullScreen="allowFullScreen" and frameBorder="0"
---
<iframe
id="player"
src="URL here"
allowfullscreen="true">
</iframe>
---
But none of that worked.. Any help here is welcome!
its very easy if you wants to add youtube videos in iframe .you just have to add iframe in src embed word like that
<iframe src="https://www.youtube.com/embed/watch?v=fbS2O4VETAo&t=2s" name="myFrame"></iframe>
after youtube.com/embed/Example url

Unable to get start time and end time of embedded videos from IFrame

We are doing a learning web application where we have to show list of videos to user , these videos can be uploaded as embedded URL so when user play the same embedded URL then we are unable to store the values of start , pause and end time of the video, We are using iFrame tag for show videos
Tried to capture the values from iFrame but haven't reach the goal.
searched a lot on net but couldn't get satisfy able content.
<iframe width="670" height="400" id="vid${v.video_id}" src="${v.embedded_url}"></iframe>
try this one.. , just replace "url" from following code to your src url
<iframe width="560" height="315" src="url ?start=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Redirect issue in Iframe

Using SOAP call I am getting a URL and displaying in iframe.That URL contents one form, User need to fill all data and submit it. While I am invoking SOAP function, has given one return link also which one redirecting to my site.But problem is while returning that page is coming inside the iframe. My requirement is pretty clear that it should redirect to given path not inside iframe.
I do appreciate for advance help.
Here is the code for Iframe
<iframe style="width:955px;height:700px;margin: 0px auto;" src="<?php echo $response_data['Url']?>" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen id="js-signFrame">
</iframe>
If you have control over both the host website and the iframe content you can use easyXDM to transfer messages between the iframe and the site (of course you can use HTML5 socket but easyXDM have a great fallback mechanism which supports older browsers as well).
You can use the message logic to alter window.location of the parent window.
Here is a POC I made to show how to transfer data between different domains without getting caught by browser's same-origin-policy, you can use it as reference.
link:
https://github.com/eitankw/cross-domain

Invalid Parameters on playing youtube embedded on a website

At first I'm getting this error "This video contains content from sme. It is restricted from playback on certain sites" Then after reading this post I added few lines to my youtube emded url I'm now receiving a new error which says "Invalid Paramaters". By the way what I'm trying to do here is embed a youtube video on my site.
This is the original embed url of the youtube I'm trying to embed on my website. Where I'm receiving the error message "This video contains content from SME. It is restricted from playback on certain sites. Watch on Youtube".
<iframe width="420" height="315" src="http://www.youtube.com/embed/CFqbhsvXE7M" frameborder="0" allowfullscreen></iframe>
This is the editted one after reading the post. And getting this error "Invalid Paramaters".
<iframe width="420" height="315" src="http://www.youtube.com/embed/CFqbhsvXE7M?playlist=." frameborder="0" allowfullscreen></iframe>
I've done some research and it says YouTube indeed has changed their API over the last couple of days and flash fallback from their HTML5 Video Player fails. and I didn't find a clear explanation how to fix it. Using the original embed url the youtube plays well in my localhost. After I deployed it in a server I'm now receiving those errors. Is this something to do with the domain of the server I'm using?
Question:
How could I possibly fix this? T_T
Other Information: I'm using asp.net MVC3
Instead of using embed use watch and add in a few attributes, works all the time:
<iframe width="420" height="315"
src="http://www.youtube.com/watch?v=CFqbhsvXE7M"
frameborder="0"
webkitAllowFullScreen
mozallowfullscreen
allowFullScreen></iframe>

How can I play a URL in an iframe?

I want to play a URL in an iframe. When I place any other URL in the following line, it works fine, but when I enter the YouTube URL I get a blank page. Can anyone tell me where I am going wrong, or suggest any other method by which I can play the YouTube URL in an iframe?
<iframe width="100%"
height="610px"
frameborder=0
marginwidth="0"
marginheight="0"
scrolling="yes"
name="frmTest"
src="http://www.youtube.com/watch?v=dG5irzonTXA">
</iframe>
Your code will open a normal YouTube page. If I'm correct you want to have an iframe with video in it.
Try this: https://developers.google.com/youtube/youtube_player_demo
There's lot's of documentation there too.

Resources