How to fix youtube live chat in HTML - html

I'm new to code and I want to implement a code that puts the youtube live chat onto the page. Right now it is refusing to connect.
Here is my code:
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<iframe id="pewdiepie" height="80px" width="300px" frameborder="0" src= "https://akshatmittal.com/youtube-realtime/embed/#!/UCq-Fj5jknLsUf-MWSy4_brA" style="border: 0; width:300px; height:80px; background-color: transparent;"></iframe>
<p>
<iframe id="tseries" height="80px" width="300px" frameborder="0" src="https://akshatmittal.com/youtube-realtime/embed/#!/UC-lHJZR3Gqxm24_Vd_AJ5Yw" style="border: 0; width:300px; height:80px; background-color: transparent;"></iframe>
<p>
<iframe height="500" width="300" src="https://www.youtube.com/live_chat?v=UVxU2HzPGug&embed_domain=<MY_IP>" style="border: 0; width:300px; height:100px; background-color: transparent;"></iframe>
</body>
</html>
Is there anything wrong with the code? And how I can fix it? By the way I hid my IP address.

To embed a youtube live chat, the link must be like this:
"https://www.youtube.com/live_chat?v=<id_video>&embed_domain=<your_domain>"
So, to embed your chat on stackoverflow, it will be:
"https://www.youtube.com/live_chat?v=UVxU2HzPGug&embed_domain=www.stackoverflow.com"
EDIT :
Here is the official documentation from google.
During a live stream, you can embed live chat on your own side 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 the URL of the page you’re embedding the chat on. If they are different, the embedded chat will not load.

Related

how to display a site in a iframe in html

Why does this code not display the YouTube site or other sites like Pandora:
<html>
<body>
<iframe src="https://www.youtube.com"></iframe>
</body>
</html>
The reason is, that youtube doesn´t allow that way of access. Just with an embed code, like:
<html>
<body><iframe width="640" height="360" src="http://www.youtube.com/embed/M7lc1UVf-VE" frameborder="0"/>
</body>
</html>
This will work, but whole youtube can´t be embedded.
Have a nice day.

Cannot see OpenStreetMap, Ruby on Rails

I would like to add OSM to my website (in Ruby on Rails), so I've exported following html code from their site:
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://www.openstreetmap.org/export/embed.html?bbox=-109.3359375%2C56.84897198026975%2C25.3125%2C84.38877975103257&layer=mapnik&marker=76.23088818107027%2C-42.076958649999995" style="border: 1px solid black"></iframe><br/>
<small>see more</small>
and I've put it into
<!DOCTYPE html>
<html>
<body>
//here
</body>
</html>
The problem is, that there is only empty rectangle, without map, but when I click "see more" I'm redirected to OSM site with big map.
What can cause, that I can't see map on my site?
Edit:
I've just seen, that it only doesn't work only in desktop browser, when I use my mobile phone is ok.

Iframe problems with Gmail

I'm pretty new to coding, and am trying to make a small chrome extension that displays my gmail in an Iframe. I'm having several problems: I have to sign in with google inside my Iframe, and the gmail will refuse to display when I try loading the extension. Keep in mind, the iframe works fine with websites like "https://ifunny.co", but it will refuse to work with anything Google.
My html box that pops up with the click of the extension button:
<!DOCTYPE html>
<html>
<!---body>
<iframe src="https://ifunny.co" style="border:2px solid black;" height="500" width="350"></iframe>
</body--->
<body>
<iframe src="https://mail.google.com" style="border:2px solid black;" height="500" width="350" name="myIframe" id="myIframe"></iframe>
</body>
</html>

HTTPS breaking embedded PDF

I just switched to HTTPS on my website. I had been displaying a locally hosted PDF via an iframe; the iframe displays a small html file with the PDF embedded (as an object) in it. However, the PDF is no longer displaying. I can navigate to the PDF & it displays just fine but does not display when I load the html page. What can I do to make the PDF display?
iframe
<iframe src="/updates/update.htm" width="100%" height="800px"
marginheight="0" frameborder="0"></iframe>
update.htm
<html>
<header>
<link rel="stylesheet" href="custom-styles.css">
</style>
</header>
<body>
<object src="update.pdf"
type="application/pdf" width="100%" height="800px"><div id="show-text">
<p>It appears your web browser is not configured to display PDF files.</p>
<p><a href='update.pdf'>Click here to download the PDF file.</a></p>
</div>
</object>
</body>
</html>
custom-styles.css
#show-text {
display: block;
width: 100%;
height: 15%;
background: #D1D1D1;
}
Shot in the dark here, but are you sure that "/updates/update.htm" is the right path? If your page is www.site.com/something/index.php and you use that path, the browser will look for www.site.com/something/updates/update.htm. Perhaps you want www.site.com/updates/update.htm. Maybe you need a relative path like "../updates/update.htm"
UPDATE
Try <object data="update.pdf">. The <embed> tag uses scr=; <object> uses data= according to w3schools.

Embed a Youtube Channel into HTML with iFrame

I'm trying to embed a Youtube channel into a HTML page.
For example I take this channel address: http://www.youtube.com/aaaa
I used this code:
<html>
<head>
</head>
<body>
<iframe src="http://www.youtube.com/aaaa"></iframe>
</body>
</html>
The problem is that it doesn't work. I tried with another site, and it works. What can be the problem?
The problem seems to be induced by this URL:http://www.youtube.com/aaaa.
I tried some other URLs and it works.
You can try some URLs easily here.
Try this:
<script src="http://www.gmodules.com/ig/ifr?url=http://www.google.com/ig/modules/youtube.xml&up_channel=aaaa&synd=open&w=320&h=390&title=&border=%23ffffff%7C3px%2C1px+solid+%23999999&output=js"></script>
<iframe class="youtube-player" type="text/html" width="640" height="385" src="http://www.youtube.com/aaaa" frameborder="0">
</iframe>
This was taken from youtube here
it appears IE (and others) can only use [youtube.com /embed/ videoID] (HTML5 Player) - at least the way I am implementing them.
Try this:
<div name="iframe" style="width:100%; height:635px; border:2px solid grey; overflow:hidden">
<iframe src="http://yourchannel-URL" style="width:100%; height:700px; margin-top: -65px" scrolling="true">
If you can see this, your browser doesn't support iframes. Click here to see my YouTube channel.
</iframe>
</div>
This should embed a complete youtube channel without a youtube search bar.
To display a gallery of thumbnails of your YouTube Channel's most recent videos, you can use an iframe:
<iframe
onload="javascript:this.style.height = this.contentWindow.document.body.scrollHeight + 'px';"
scrolling="no"
height="600"
marginheight="0"
frameborder="0"
width="480"
src="http://youtubechannelembed.com/gallery.php?vids=9&user=doitfordummies&row=3&width=150&margin_right=15&desc=100&title=30&views=1&likes=1&dislikes=1&fav=1">
</iframe>