I am using embedded Vevo videos in JW player. It is working fine in Firefox, but it displays an error on Chrome and Safari:
error loading Youtube embedding not allowed
Here is my code:
<html>
<head>
<script src="http://jwpsrv.com/library/2121212121.js"></script>
</head>
<body>
<div id="container-video">
<script type='text/javascript'>
jwplayer("container-video").setup({
file: "http://www.youtube.com/watch?v=j5-yKhDd64s",
width: 545,
height: 350
});
</script>
</div>
</body>
</html>
Vevo has a special license with YouTube hence, it is not possible to embed them. Let me explain this: You may have seen in YouTube Studio that there is an option that you can toggle to allow or disallow embedding video on the website. This is what Vevo does to its video, Vevo has disallowed embedding.
Youtube Embedded Allow-Disallow Image
Related
Instead of using true gifs, we are using mp4 videos that loop (in order to save load time)
However, Safari is refusing to autoplay the videos, even with autoplay loop muted playsinline.
Is there a way to create looping videos/gifs that do not require large file sizes and can autoplay in mobile
My video tags look like:
<video preload autoplay="autoplay" muted="true" playsinline="true" loop>
<source src= 'https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_20mb.mp4'>
Your browser does not support video tag
</video>
Have also tried:
<video preload autoplay muted playsinline loop>
<source src= 'https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_20mb.mp4'>
Your browser does not support video tag
</video>
In some cases I want the gif to start when a user scrolls to a specific point. So I use:
if (/* user scrolls to div */){
document.getElementById('my-video').play();
}
Is there a way to have videos autoplay in Safari, or any best practice alternatives?
Your HTML5 actually works fine with a different source video - the following runs in Safari 12.1.1 on Mac OSX 10.14.5:
<video preload autoplay="autoplay" muted="true" playsinline="true" loop>
<source src= 'http://clips.vorwaerts-gmbh.de/VfE_html5.mp4'>
Your browser does not support video tag
</video>
It may be that there was be an issue with the video source you were using or the network or server it is on - for example, it is very slow loading and won't play in Chrome or Safari when I test it directly.
If you are seeing the same issue with another video, it may be that there is a format issue or that there is some server to safari indication issue which have been seen previously, although the root cause is not clear at this time: Safari 9.0 can not play mp4 video on the storage server
Either way, there is nothing obvious wrong with your original HTML5 above.
For iOS, there are specific auto play rules - at the time of writing these are the most recent AFAIK (https://webkit.org/blog/6784/new-video-policies-for-ios/):
By default, WebKit will have the following policies:
I followed the instructions on this page
and the embedded Youtube playlist which should Autoplay is:
<iframe width="535" height="300" src="https://www.youtube.com/embed?listType=playlist&list=PL8kx4WFqlOK90fxZpao5k2WUEmSPchGhR&autoplay=1&loop=1" frameborder="0" allowfullscreen>
</iframe>
It does loop when it reaches the last clip, but it won't play automatically on page load. Is there a fix for this, please? Thanks.
PS. I know this question has been asked before, but I could not find a working solution for this.
Try this:
https://www.youtube.com/embed/videoseries?list=PLElJF-XLNL2Brb_dTiVNSe9qld1eR_Jft&autoplay=1&loop=1
Google Chrome:
Since Google Chrome removed non-muted autoplay functionality in version 66, you have to add the parameter "mute=1" in that browser.
Or change autoplay-policy in the chrome settings:
How to allow video autoplay in a Google Chrome kiosk app in version 66 or later
How to pause a youtube video when soundcloud audio paying and vise versa
<span class="soundcloud_embed" id="soundcloud_post_312">
<iframe id="ui-id-1" width="100%" height="300" scrolling="no"
frameborder="no" src="https://w.soundcloud.com/player/?
url=https%3A//api.soundcloud.com/tracks/163100334&
color=%23ff5500&
auto_play=false&hide_related=false&show_comments=true&
show_user=true&show_reposts=false&show_teaser=true&
visual=true">
</iframe>
</span>
<span class="youtube_embed" id="youtube_post_309">
<iframe id="ui-id-2" width="560"height="315" src="https://www.youtube.com/
embed/M7lc1UVf-VE" frameborder="0" gesture="media"
allow="encrypted-media" allowfullscreen></iframe>
</span>
I've found the source at this link
Pause Youtube embed when playing Soundcloud embed
http://jsfiddle.net/Lpq9n7ht/
If you need to control the player, you need IFrame API.
The IFrame player API lets you embed a YouTube video player on your
website and control the player using JavaScript.
Read through the documentation to get started. There is starter guide that will help you how to use the API. Codes are also available as your reference depending on the functions that you want to use.
For the requirements, remember this.
The user's browser must support the HTML5 postMessage feature. Most
modern browsers support postMessage, though Internet Explorer 7 does
not support it.
I can't get youtube video to work with video.js
I added in the head :
<link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/c/video.js"></script>
Then in the body :
<video id="example_video_1" class="video-js vjs-default-skin" controls preload="none" width="640" height="360"
data-setup='{"techOrder":["youtube","html5"],"ytcontrols":false}'>
<source src="http://www.youtube.com/watch?v=qWjzVHG9T1I" type='video/youtube' />
But I have a black div (tested in latest Chrome & FF).
Am I missing something ?
Thanks
The pull request referenced above was closed, and somebody else took it over and made it a plugin, available from the video.js plugins wiki
You'll need that (or a similar) plugin to play youtube videos. There's an example of this working for the latest API here: enabling youtube playback with video.js wrapper
It appears that the Pull Request which add the Youtube Tech feature has not been merged yet.
Though it's getting old now: https://github.com/zencoder/video-js/pull/157
I wonder if we could have this soon or not at all :(
Can we add Youtube player in a HTML5 & javascript page without using flash. I need to make an application which uses youtubeplayer & could be played on differnet platoforms e.g. ios,android
(iOS doesn't support flash)
Here you have the code for embed videos with fallback to flash for those who doesn't support html5.
<iframe class="youtube-player" type="text/html" width="640" height="385" src="http://www.youtube.com/embed/VIDEO_ID" frameborder="0">
</iframe>
More info here http://apiblog.youtube.com/2010/07/new-way-to-embed-youtube-videos.html