...not working. Any ideas why?
<iframe width="560" height="315" src="https://www.youtube.com/embed/nwe76N7J0EI?rel=0&controls=0&showinfo=0&start=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
this is a latest code youtube provides
It's the browser blocking autoplay(with sound) by default.
https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
It was finally implemented a few months ago. You can still use autoplay, but the video will need to be muted.
Notice the added mute=1 in the embed below. It will autoplay, but it breaks if you remove it.
<iframe width="560" height="315" src="https://www.youtube.com/embed/nwe76N7J0EI?rel=0&autoplay=1&mute=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
Related
Asking this to share my solution, because I searched for way too long to find this work around and not have it be a simple answer...
So: I have a youtube video embedded on my site. And it works perfectly fine on my windows machine (Google Chrome, Edge, Firefox, all tested and working). Yet, when I tested it on my iPhone chrome browser it displayed nothing and made the entire page link back to the homepage. The iframe provided was:
<iframe width="560" height="315" src="https://www.youtube.com/embed/video_id" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
And, like I said, was displaying fine on Windows machines. I had a colleague use the web inspector on his mac to see if the code wasn't loading or something of the sort, but no dice. Code appeared exactly the same in both browsers, and gave no errors (no cross site error, even).
After a lot of trial and error, I arrived at this (extremely simple) solution from EncodeDNA (https://www.encodedna.com/html5/embed-youtube-video-in-a-webpage-without-iframe.htm). Just use an object instead of an iframe:
<!DOCTYPE html>
<html>
<head>
<title>Embed YouTube Video without iFrame</title>
</head>
<body>
<object data='https://www.youtube.com/embed/video_id?autoplay=1'
width='560px' height='315px'>
</object>
</body>
</html>
I plugged it in and it worked on all browsers, including (and most importantly in this case) IOS browsers.
I wish to enable autoplay with sound and tried added code
-- ?autoplay=1" frameborder="0" allow="autoplay"
But it did not work, how I should do for this situation?
Remove allow="autoplay" and it should be fine. Here's an example:
<iframe width="560" height="315" src="https://www.youtube.com/embed/[Video ID]I?&autoplay=1" frameborder="0" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/iO26ikYDquo" frameborder="0" allowfullscreen></iframe>
i dont want to use iframe tag due to resons mentioned in this accepted answer
You can also use object or embed
Example object:
<object width="420" height="315"
data="http://www.youtube.com/embed/XGSy3_Czz8k">
</object>
Example embed:
<embed width="420" height="315"
src="http://www.youtube.com/embed/XGSy3_Czz8k">
Visit HTML YouTube Videos for more information
I fear I have the same challenge as a previous posters:
Embedding a Google Group - nothing is displayed when not logged into Google
and
How to embed google groups to a web page
The first resolved, but the second unresolved.
Would like to embed a google-group forum into an html page. I am unable to do that following guidance provided by Google Groups using iframe:
<iframe id="forum_embed"
src="javascript:void(0)"
scrolling="no"
frameborder="0"
width="900"
height="700">
</iframe>
<script type="text/javascript">
document.getElementById('forum_embed').src =
'https://groups.google.com/forum/embed/?place=forum/test-distance'
+ '&showsearch=true&showpopout=true&showtabs=false'
+ '&parenturl=' + encodeURIComponent(window.location.href);
</script>
and successfully shown by http://www.jqcoolgallery.com/support.html. I can view this embedded forum, but when applying the same syntax in my html, I do not have success.
I have the same lack of success when viewing either in Firefox 27 or in Internet Explorer 11.
your example works fine for me, see this jsfiddle
complete example code below
<!DOCTYPE html>
<head>
<title>Test</title>
</head>
<body>
<div>
<iframe id="forum_embed"
src="javascript:void(0)"
scrolling="no"
frameborder="0"
width="900"
height="700">
</iframe>
<script type="text/javascript">
document.getElementById('forum_embed').src =
'https://groups.google.com/forum/embed/?place=forum/test-distance'
+ '&showsearch=true&showpopout=true&showtabs=false'
+ '&parenturl=' + encodeURIComponent(window.location.href);
</script>
</div>
</body>
</html>
screenshot:
<iframe id="forum_embed" src="https://groups.google.com/forum/embed/?place=forum/NAMEOFYOURGROUP#!forum/NAMEOFYOURGROUP" scrolling="no" frameborder="0" width="100%" height="700"></iframe>
This will work for you as it did for me.
Yes NAMEOFYOURGROUP appears twice on that iframe.
Don't forget to change NAMEOFYOURGROUP to your group name.
I'm using the following iframe tag in my portlet jsp:
<iframe src="http://www.facebook.com/plugins/like.php?href=
<%=url%>&layout=standard&show_faces=false&width=286&action=like&font=arial&colorscheme=light&height=35"
scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:286px;
height:35px;" allowTransparency="true">
</iframe>
Clicking on like button in firefox redirects to FB login page. However in IE8 it redirects to a blank page.
Following is the url I copied from IE8 browser which shows blank page:
http://www.facebook.com/connect/connect_to_external_page_widget_loggedin.php?social_plugin=like&external_page_url=http%3A%2F%2Flocalhost%3A8080%2Fweb%2Fbates%2Fprofile#_=_
Try disabling IE Protected Mode.
<iframe src="http://www.facebook.com/plugins/like.php?href=
<%=url%>&layout=standard&show_faces=false&width=286&action=like&font=arial&colorscheme=light&height=35"
scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:286px;
height:35px;" allowTransparency="true">
</iframe>