Hi Support!
I’m trying the YouTube Javascript API so I can embed videos without YouTube suggesting other videos at the end. I had a look at the help article (which is outdated) in Webflow help center, but I think I’m doing something wrong since it’s not working! Could you please have a look at:
http://hiv-leeftijd.webflow.io/
Thank you so much!
Best,
Daniel
Could you provide a read-only link so that we can take a look at your project? Thanks!
Here is how:
Sure! https://preview.webflow.com/preview/hiv-leeftijd?preview=13efb86f81814bca30ebd3613b8c5df3
Thx for having a look…
I actually found a bug that’s restricting us to put a ` before the javascript button links. I’ll let you know as soon as this is fixed.
Meanwhile there are a few things to fix on your page:
The code on the Webflow help page was a bit bugged and hard to read, did you make sure you put this code in custom code before /body tag?
<script>
function playthevideo(){
var myPlayer = document.getElementById('my-video');
myPlayer.playVideo();
}
function stopthevideo(){
var myPlayer = document.getElementById('my-video');
myPlayer.stopVideo();
}
function pausethevideo(){
var myPlayer = document.getElementById('my-video');
myPlayer.pauseVideo();
}
</script>
This should be the code in the HTML Embed:
<embed id="my-video" style="position: absolute; top: 0; left: 0;" width="100%" height="100%" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen allowfullscreen="true" allowscriptaccess="always" quality="high" bgcolor="#000000" name="my-video" style="" src="http://www.youtube.com/v/watch?v=g2U5gWlQBLw?enablejsapi=1&version=3&playerapiid=ytplayer" type="application/x-shockwave-flash">
Lastly, make sure that the html embed element has a fixed height (example: 300px) because right know it wants to fill 100% of the parent element, but it can’t do that because the parent element has height: auto which will result in height 0% for the html embed.
I hope this helps and I’ll let you know once the little bug is fixed.
Thanks @DharmaNode I made the changes…The movie is not yet working but I will wait for the bug fix and see if this helps.
Hi @DharmaNode, that is not a bug, that is a special character (the back-tick) to allow to use unvalidated strings in the link.
If that gives some issue, also a click trigger event can be setup on the link to trigger the function.
@Daniel_Tiebor, Looking at the published site, there is some error in the console that should be fixed, then page republished and re-checked.
As as side point I would not use those instructions from the Webflow help you originally linked to, I am not sure why that page is still published, it is using old API code.
The Latest iFrame API should be used to control the video: YouTube Player API Reference for iframe Embeds | YouTube IFrame Player API | Google for Developers
Full example provided on the page linked above.
I hope this helps.
Thanks @cyberdave…I got the video’s working but having them embedded responsively is very difficult. Is there a quick and easy way of achieving this?
Setting the width of the html embed element to 100% should make it more responsive.
@DharmaNode I’ve done this but than the height is not the way it’s supposed to be and the movie is cramped into the video window resulting in black bars to the left and right of the video.
@DharmaNode and @cyberdave…found the solution…used this tool online for free! http://embedresponsively.com/
This topic was automatically closed after 60 days. New replies are no longer allowed.
