Comments (22)
Try this if it works for you:
https://stackoverflow.com/questions/27573017/failed-to-execute-postmessage-on-domwindow-https-www-youtube-com-http
from vue-youtube.
@freddycrugger I am having the same problem. I have looked at your link on SO, but neither the http/https
solution nor the origin
solution could solve the problem for me. To what solution are you referring?
from vue-youtube.
Perhaps the plugin is too old and needs an update, I think its been 3 years without an update. This could be the issue. Maybe something changed on the Youtube API side since.
from vue-youtube.
Also www-widgetapi.js:108
Error while parsing the 'allow' attribute: 'accelerometer;', 'autoplay;', 'encrypted-media;', 'gyroscope;', 'picture-in-picture' are invalid feature names.
from vue-youtube.
I have the same issue, both locally (in http://localhost:3000) and remotely (https site.) I am using the origin parameter, but it doesn't make any change. Has anyone fixed this issue?
from vue-youtube.
i have the same issue locally and on the server using https
from vue-youtube.
sameeee dang
from vue-youtube.
same +1
from vue-youtube.
Same issue, locally and in production with HTTPS.
Has anyone found a workaround?
from vue-youtube.
Same issue, locally and in production with HTTPS. Has anyone found a workaround?
This fixed my issue: https://stackoverflow.com/a/27574013 .
My target URL was not https but HTTP
You could also try this:
https://stackoverflow.com/a/54396524
from vue-youtube.
This fixed my issue: https://stackoverflow.com/a/27574013 . My target URL was not https but HTTP
You could also try this: https://stackoverflow.com/a/54396524
I tried both of these and it didn't work for me. Issue still happens both locally and in production.
Debugging the minified file, I found that it always tries to execute this piece of code:
window.postMessage('{"event":"listening","id":1,"channel":"widget"}', 'https://www.youtube.com')
Which will always throw an error unless you paste this on a youtube window.
from vue-youtube.
This fixed my issue: https://stackoverflow.com/a/27574013 . My target URL was not https but HTTP
You could also try this: https://stackoverflow.com/a/54396524I tried both of these and it didn't work for me. Issue still happens both locally and in production. Debugging the minified file, I found that it always tries to execute this piece of code:
window.postMessage('{"event":"listening","id":1,"channel":"widget"}', 'https://www.youtube.com')
Which will always throw an error unless you paste this on a youtube window.
Can you try to post your origin url with the POST?
eg:
this.player = new window['YT'].Player('player', {
videoId: this.mediaid,
width: '100%',
playerVars: {
'wmode': 'opaque',
'origin': 'http://localhost:8100'
},
}
So your minified code end up with something like this:
'https://www.youtube.com/embed/' + id + '?showinfo=0&enablejsapi=1&origin=http://localhost:8100';
Obviously, you will need to adapt your code with the above idea. But I am wondering if passing the origin website URL will help you.
If you check their bottom example, the origin is passed in the URL:
https://developers.google.com/youtube/iframe_api_reference
from vue-youtube.
Thank you for your reply
Yes, I'm sending the origin with the playerVars, like this
playerVars: { rel: 0, origin: window.location.origin, },
My iFrame src attribute looks like this
https://www.youtube.com/embed/VIDEOID?rel=0&origin=http%3A%2F%2Flocalhost%3A3000&enablejsapi=1&widgetid=1
Unfortunately the error persists:
www-widgetapi.js:984 Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://www.youtube.com') does not match the recipient window's origin ('http://localhost:3000').
from vue-youtube.
Thank you for your reply
Yes, I'm sending the origin with the playerVars, like this
playerVars: { rel: 0, origin: window.location.origin, },
My iFrame src attribute looks like this
https://www.youtube.com/embed/VIDEOID?rel=0&origin=http%3A%2F%2Flocalhost%3A3000&enablejsapi=1&widgetid=1
Unfortunately the error persists:
www-widgetapi.js:984 Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://www.youtube.com') does not match the recipient window's origin ('http://localhost:3000').
Could you try this instead?
origin: location.hostname
from vue-youtube.
Make sure your VIDEOID is correct.
https://www.youtube.com/embed/VIDEOID?rel=0&origin=http%3A%2F%2Flocalhost%3A3000&enablejsapi=1&widgetid=1
As
"'https://www.youtube.com/embed/' + VIDEOID + '?rel=0&origin=http%3A%2F%2Flocalhost%3A3000&enablejsapi=1&widgetid=1'"
Can you also try to remove "&widgetid=1" aswell please as I think this is extra which is not part of the Youtube API.
Thanks
from vue-youtube.
The VIDEOID is correct, as it is working on the page.
After trying origin: location.hostname on playerVars, my iframe src looks like this.
https://www.youtube.com/embed/dQw4w9WgXcQ?rel=0&origin=http%3A%2F%2Flocalhost%3A3000&enablejsapi=1&widgetid=1
But the console error persists. It is an annoyance tbh, as everything works fine, but I'm trying to get rid of this console error.
I'm not being able to pinpoint who's adding this widgetid=1 attribute, I'm using [email protected] and [email protected]
from vue-youtube.
It looks like this vue package is kind of old.
From what I have read, your problem could be due to a loading issue, try to read the answer with the 68 points:
I am wondering if you are perhaps loading the url too fast(before the iframe is fully loaded) and perhaps not all the correct data is being passed from the browser.
Have you tried to start the player from a mounted hook(When the DOM is ready).
from vue-youtube.
Have you tried to start the player from a mounted hook(When the DOM is ready).
I'm sorry for my ignorance but how can I do that? If you are kind to provide a link with a tutorial or some sort, I could sort it out.
from vue-youtube.
When you use vue, you have hooks as shown here:
https://www.google.com/search?q=vue+hooks&rlz=1C1CHBF_enMT995MT995&sxsrf=ALiCzsYtEBLqsPrIcG4g6QJcvi3lAGl5XQ:1653933849957&source=lnms&tbm=isch&sa=X&ved=2ahUKEwiE0-7c54f4AhXiSPEDHT_iA-EQ_AUoAXoECAEQAw&biw=1920&bih=937&dpr=1#imgrc=ubdKX47A5BaYPM
Imagine from top to bottom a series of functions running before or after the html is rendered.
Based on the package you are using:
https://www.npmjs.com/package/vue-youtube
Make sure that the play() function is not automatically started. Make sure it is setup like this:
In the example they give, you have manual start of the video when the <button @click="playVideo">play is clicked.
I wonder if your problem is because you try to play the video on page load.
export default {
data() {
return {
videoId: 'lG0Ys-2d4MA'
}
},
methods: {
playVideo() {
this.player.playVideo()
},
playing() {
console.log('\o/ we are watching!!!')
}
},
computed: {
player() {
return this.$refs.youtube.player
}
}
}
from vue-youtube.
My code looks very similar to that. I'm not playing the video on page load.
I'm showing the video down the page after some text and I noticed that the iframe loads as the user scrolls down.
from vue-youtube.
Can you try in another browser to see if this happens aswell?
Not sure what else to do, if you checked the loading, the https, hostname....it is pretty much everything.
from vue-youtube.
On Safari the error looks a bit different:
Unable to post message to https://www.youtube.com. Recipient has origin http://localhost:3000.
And on Firefox it looks like this:
Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('[https://www.youtube.com'](https://www.youtube.com%27/)) does not match the recipient window's origin ('http:
//localhost:3000'/).`
I don't know what else to check either, already tried everything I found on google, stack overflow, etc.
from vue-youtube.
Related Issues (20)
- iframe is unable to load video
- Not compatible with Vue 3 RC HOT 8
- event methods suddenly stopped working HOT 3
- Hide related videos HOT 1
- Modestbranding is not working
- If video is unavailable trigger the error function
- youtube 401 code error
- Add a prop for disabling controls on iframe HOT 1
- Missing @types/vue-youtube
- Youtube Api Key
- is there any way to remove ytp-pause-overlay ? HOT 1
- Add onApiChange event
- how to change height HOT 1
- Doesnt work with Vue 3.0 HOT 8
- Incorrect duration returned
- Trying to install it, I get the error: ERESOLVE unable to resolve dependency tree HOT 1
- Loading mixed (insecure) display content
- How to use YouTube video as the background?
- Missed Opportunity
- Failed to construct 'PresentationRequest': The document is sandboxed and lacks the 'allow-presentation' flag. HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vue-youtube.