The YouTube Iframe API encountered an issue while attempting to send a message to an HTTP recipient. The recipient's origin

Encountering an error when using the YouTube Iframe API on Safari 9.1, OS X Yosemite

Issue: Unable to post message to http://www.youtube.com. Recipient has origin https://www.youtube.com

This problem only occurs in Safari, as other browsers like Firefox and Chrome work fine. Additionally, it seems to be specific to one machine while another with the same OS and browser works correctly.

The troubleshooting process is unclear at this point.

The iframe HTML code being generated is:

<iframe id="myVideo" frameborder="0" allowfullscreen="1" title="YouTube video player" width="200" height="200" src="http://www.youtube.com/embed/?html5=1&amp;showinfo=0&amp;autoplay=0&amp;rel=0&amp;controls=1&amp;playsinline=1&amp;enablejsapi=1&amp;origin=http%3A%2F%2Fwww.example.com"></iframe>

And the JavaScript code is as follows:

...
vid_frame = new YT.Player(id, {
    height: '200',
    width: '200',
    videoId: id,
    playerVars: {
       html5: 1,
       showinfo: showVideoInfo,
       autoplay: 0,
       rel: showRelatedVideos,
       controls: showPlayerControls,
       playsinline: 1
    },
    events: {
        onReady: onPlayerReady
    }
});

The error indicates a potential browser setting blocking communication between the website and YouTube API due to the discrepancy in URLs (http vs. https).

Manually changing http to https in iframe URLs results in warnings about untrusted origins if the main website is served over http.

Looking for solutions and further guidance, referencing a related question on Stack Overflow: Unable to post message to http://www.youtube.com. Recipient has origin https://www.youtube.com

Any suggestions on where to start debugging this issue?

javascriptiframeyoutubesafariyoutube-iframe-api

Answer №1

To properly load the YouTube Iframe API, avoid using the 

<script src='path/to/iframe_api'></script>
tag and follow the recommended method outlined in the documentation:

The following code asynchronously loads the IFrame Player API:

var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

It is advisable to generate the script tag dynamically from the JavaScript side rather than directly embedding it in the HTML (e.g. 

<script src="..."></script>
).

Answer №2

To easily update the <embed> URL, simply switch it to https://:

<iframe id="myVideo" frameborder="0" allowfullscreen="1" title="YouTube video player"
        width="200" height="200" src="https://www.youtube.com/embed/?html5=1&amp;showinfo=0&amp;autoplay=0&amp;rel=0&amp;controls=1&amp;playsinline=1&amp;enablejsapi=1&amp;origin=http%3A%2F%2Fwww.example.com"></iframe>
<!----------------------------------------^

The main reason is that loading content with https:// over http:// is permitted, but not vice versa. As a last resort, you can always utilize CloudFlare's complimentary SSL proxy.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to display my to-do list items within a React component

I'm working on a straightforward todo application using fastapi and react. How can I display my todos? I attempted to use {todo.data}, but it's not functioning as expected. Here is my Todos.js component: import React, { useEffect, useState } fro ...

javascriptreactjsfrontendfastapifetch-api

What could be causing my jQuery handler to not capture my form submission?

I am developing a Ruby web application and using JQuery and AJAX to send/receive data. However, I am facing an issue where pressing the enter key does not submit the form. What should I do to ensure that my form submits successfully? Within my Foundation ...

javascriptjqueryhtmlajaxforms

Removing nested divs using JavaScript

My website has a nested div structure which contains multiple child divs. Here is an example of the div structure: <div id="outside-one"> <div class="inside" id="1"></div> <div class="inside" id="2"></div> <div ...

javascriptjqueryhtmlcss

The Karma Node Package is failing to run and providing no information

I've been troubleshooting an issue with my karma.conf.js file for the past two days. Despite my efforts, the terminal output provides no helpful information to identify the source of the problem. There are no hints within the document itself indicatin ...

javascriptangularjsnpmphantomjskarma-jasmine

Error thrown: Upon attempting to reopen the modalbox after closing it, an uncaught TypeError is encountered, indicating that the function $(...).load

An unexpected error occurred: $(...).load(...).modal is not functioning properly After closing a modal, I encountered this error in the console when attempting to reopen it. Strangely, it seems to work intermittently for a few times before throwing this e ...

javascriptjquerybootstrap-modal

When attempting to invoke a JavaScript function on JSP, there seems to be no

I am currently developing a web application and delving into the intricacies of how Ajax functions within it. I am encountering an issue where nothing occurs when I attempt to select a category, and no errors are being reported. Within my JSP page: < ...

javascriptajaxspring-mvc

Iframe Loading at Lightning Speed

I have set up a script to load my iframe, but I noticed that the script loads the iframe content too quickly. Is there a way for me to configure it to preload all CSS images and content in the background before showing the full iframe content? Here is my ...

javascriptjqueryhtmliframe

Pause jQuery at the conclusion and head back to the beginning

As a beginner in the world of jQuery, I am eager to create a slider for my website. My goal is to design a slideshow that can loop infinitely with simplicity. Should I manually count the number of <li> elements or images, calculate their width, and ...

javascriptjqueryhtmlcssslideshow

Encountering an error: [nsIWebProgressListener::onStatusChange] when utilizing jQuery AJAX within a click event?

Greetings! I am currently learning how to implement AJAX with jQuery to load an HTML document into a div element within another HTML document. Here is the approach I am using: function pageload() { $.ajax({ url: 'Marker.aspx', ...

javascripthtmljquery

Importing the class results in an undefined outcome

In the process of developing my Vue app, I'm focusing on creating some helper classes: File a.js: export default class Base {//...} File b.js: import Base from "./a" export default class Middle extends Base { // ... } File c.js: import Mi ...

javascriptvue.js

Leverage AJAX for real-time Django Model updates

Seeking insights on how to effortlessly update a Django model through AJAX without reloading the page or requiring user input for saving. Various tutorials address fetching data from Django models using AJAX, yet resources on updating models remain scarce. ...

javascriptjquerydjangoajaxdjango-models

What is the method for inserting the document URL into a text input?

Can someone provide guidance on grabbing the top URL and inserting it into a text input field? I've tried the following method, but it's not working. Any suggestions or ideas? Additionally, is there a way to make this text input field uneditable? ...

javascripthtmlformsurl

Loading modules conditionally in Nuxt.js

In my Nuxt.js configuration, I have included a module for Google Tag Manager like this: modules: [ [ '@nuxtjs/google-tag-manager', { id: 'GTM-XXXXXXX' } ] ] Everything is functioning properly, but I am curious ab ...

javascriptvue.jsnuxt.js

Selenium is encountering difficulty in recognizing Swagger web elements contained in an iframe

Having some trouble with my selenium web driver code as it fails to recognize any web elements between lines 23 and 81. Interestingly, I can interact with all elements above line 23 and below 81. 19 …. 20 <div id="main" class="well content" ui-view ...

seleniumxpathiframecss-selectorswebdriverwait

What is causing the sorting table to fail in React when using useState?

import React, { useState } from "react"; import "./App.css"; const App = () => { const [data, setData] = useState([ { rank: 1, name: "John", age: 29, job: "Web developer", }, { rank: 2, name: "Micha ...

javascriptreactjs

Issues persist with redirection when using AJAX and PHP in a login form, resulting in the user staying on the index page

After filling out both the email and password form fields and clicking the sign-in button, my script is functioning correctly. However, upon clicking the sign-in button, I want the user to be redirected to the home page. Currently, the user remains on the ...

javascriptphphtmlajax

Retrieve information according to the currency specified

In my database, I have a table of tickets with prices listed in USD. If someone from a country outside the US wants to purchase a ticket, I'd like to display the prices in their local currency for better user experience. However, converting these pric ...

javascriptnode.jsexpressmongoose

Invoke a C# function (returning a string) within ASP.NET to set the source attribute for an HTML element

I have developed some C# Methods that return a string output, such as "C:/tracks/audio1.mp3", and I want to use this as a reference for my ASP.NET project. Now, I am trying to incorporate my method "GetTrackPath()" into the HTML audio tag so that the meth ...

javascriptc#htmlasp.netrazor

typescript: best practices for typing key and value parameters in the forEach loop of Object.entries()

I have a specific object with key/value pairs that I need to iterate over using the entries() method of Object followed by a forEach() method of Array. However, I'm struggling to understand how to avoid a typescript error in this situation: type objTy ...

javascripttypescripttypescript-typings

Assign the ng-repeat item to a variable in the controller's scope

Can anyone help me figure out how to pass a particular item from my view to a function in my controller? Here is the code: The view where I want to pass p.id <tr ng-repeat=" p in projetsListe"> <td>{{p.NomProjet}}</td> <td>{{c ...

javascriptangularjsangularjs-ng-repeat