Hi team
I've build a demo course in Adapt with a video added as a component, and added a direct YouTube link under 'Source URL' type....and...I have tried multiple different ways of loading it using the iframe embed code from YouTube with various different width/height combinations (and percentages, as obviously I want it to be responsive).
Does anyone care to share the method they have used for successfully showing embedded video from YouTube in their Adapt courses?
Dani
Dani,
Did you have a chance to check out the Media component's README? It includes an example with YouTube. Please repost if this is not working for you.
Chuck
Hi there Chuck
I really appreciate your response and the link was useful. That format, however is what I have been entering under the edit component section, and I am still not experiencing any luck. The closes I have come is using an altered embed text from YouTube in the <source> window, but unformanately this is not always working the way I need it to.
I'll keep trying, of course! but any advice is appreciated :)
Dani
It's also always a good idea to search the forums first as you'll often find your question has already been asked and answered, for example: https://community.adaptlearning.org/mod/forum/discuss.php?d=1080
You might also consider using adapt-youtube as it's designed specifically for displaying YouTube videos - and so contains settings specific to the YouTube player that you won't find in the media component.
Hi All,
I downloaded and installed a vagrant install of Adapt yesterday and am pretty excited with what I have found. However I am running into some problems with embedding a youtube video. I have used the media component with the type video/youtube and the source URL //www.youtube.com/watch?v=ogJTzn1xOxI. I have also tried using the embed URL //www.youtube.com/embed/ogJTzn1xOxI. However whenever I preview the course, the component appears with a media controller but no video.
Following the advice on this post I installed the adapt-youtube component using adapt cli. In the authoring tool the component appears to open correctly, but when I attempt to preview the course, it hangs on the loading screen.
Can anyone suggest what I do next to get it to work?
Thanks very much!
What browser are you using? I seem to recall that I had issues when trying to get YouTube video working in the standard media component but only in Firefox, it worked fine in other browsers.
When you preview the course and it hangs on the loading screen, can you see any errors in the browser console? If so, what are they?
Mick,
The first link you've given works for me in both Chrome and Firefox using the regular Media component.
Have you tried downloading the course from the authoring tool and opening it locally (in Firefox)?
Regards,
Brian
Doesn't work for me in Firefox (currently 45.0.2 on Win10 but I've had this issue for ages, even on previous PC). Works fine in Chrome, IE11 and Edge though.
Never quite got to the bottom of why, I can see it's clearly trying to do it but I got nothing actually appearing... MediaElement.js seems to use the Flash-based player for this - same for you, Brian?
Thought it might be an add-on messing things up but restarting FF with all add-ons disabled makes no difference.
Hi Matt and Brian,
Thanks for the fast response! Firefox was the issue, I am on windows 10 too. When I preview in Chrome it displays correctly.
Interestingly when I download the course then open it in chrome, it hangs on the loading screen. If I open the same downloaded version in firefox it displays as it does in the preview with the video missing.
For the moment I am just testing and exploring Adapt, so getting the preview working will enable me to achieve what I need to, but if there is anything I can fix on the downloaded version, to get it to display correctly in both FF and Chrome I would appreciate any advice.
Thanks again!
m
Interestingly when I download the course then open it in chrome, it hangs on the loading screen.
The reason for that is almost certainly due to the way you are running the content. Web content really needs to be run from a web server in order to guarantee that it works properly. Chrome in particular places heavy restrictions on what web content is allowed to do when run 'locally' - whereas Firefox does not.
Look at the URL in the address bar - if it starts with 'file' rather than 'http' it means you're running the content locally.
A quick way of getting a web server is to install browser-sync via $ npm install -g browser-sync. You can then create a web server by navigating to the folder containing your content and running the command $ browser-sync start --server --directory. The fun thing about browser-sync is that it will synchronise your actions across multiple browsers, so you can run the same content on Firefox, Chrome, IE and on your iPad and it will - mostly! - keep them all in sync.