Localhost Youtube embed issue - iframe

Tried to embed youtube iframe to my local running site,
<iframe width="300" height="200" src="https://www.youtube.com/embed/xxxxx" frameborder="0" allowfullscreen></iframe>
but it shows:
Error parsing header X-XSS-Protection: 1; mode=block; report=https://www.google.com/appserve/security-bugs/log/youtube: insecure reporting URL for secure page at character position 22. The default protections will be applied.
If to test embed youtube iframe in local, any best practice or method to overcome this ?

Related

Why when I use an Iframe to embed a youtube video I get GET https://www.youtube.com/img/meh7.png 404?

I am using iframe to embed youtube videos on my nextjs website. But I get an error in the browser console:
GET https://www.youtube.com/img/meh7.png 404 index.js:1962
Failed to load resource: the server responded with a status of 404 () https://www.youtube.com/img/meh7.png:1
enter image description here
The iframe that youtube itself throws:
<iframe
width="500"
height="281"
src="https://www.youtube.com/embed/E7wJTI-1dvQ"
title="YouTube video player"
frameBorder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowFullScreen
/>
I'm not quite sure what it is. I think it could be the thumbnails, although I'm not sure, let alone have any idea of ​​the solution.
The video plays fine. It does not have any problem except for the error that the browser console throws
Why does this error come out? How do I solve this error?
I have obtained the iframe from youtube itself, but the error persists
The error is due to the youtube cookie service. You try to log in but you can't. I didn't find a way to disable it directly in the Iframe. But if I use the react-lite-youtube-embed package and set the noCookie={true} property to it to disable cookies the error goes away:
<LiteYouTubeEmbed
id="E7wJTI-1dvQ"
title="What’s new in Material Design for the web (Chrome Dev Summit 2019)"
noCookie={true}
/>
For more information: https://www.npmjs.com/package/react-lite-youtube-embed

How to embed an entire azure web site into a WordPress site

I am trying to embed an entire azure website into a wordpress site. The following works:
<iframe src="https://tvirusly.azurewebsites.net" height="1200" width="1600" title="Covid Risk Calculator"></iframe>
but when I click inside the above website or use the following script, it does NOT work:
<iframe src="https://tvirusly.azurewebsites.net/AnonymousEvents/Create" height="1200" width="1600" title="Covid Risk Calculator"></iframe>
I get the error that tvirusly.azurewebsites.net refused to connect.
Thank you in advance for your help.
This happens because the URL https://tvirusly.azurewebsites.net/AnonymousEvents/Create sends the X-Frame-Options: SAMEORIGIN header. It prevents the site to be included in an iFrame.
If you have access to the source code of tvirusly.azurewebsites.net, then you can see this solution: Windows Azure iframe domain provider = issue with X-Frame-Options.
You basically set X-FRAME-OPTIONS to an empty string.
If you can't change the source, then you're out of luck.

Displaying iframes in Office applications embedded browser

We included Google reCaptcha v3 in a custom login page that protects SharePoint. The solution works in all browsers except the embedded browser of Office applications. We receive the following error from Word if we try to login via the embedded browser after opening a document from SharePoint:
Your organization's policies are preventing us from completing this action for you. For more info, please contact your help desk.
reCaptcha uses an iframe to work. This iframe looks like this:
<iframe src="https://www.google.com/recaptcha/api2/anchor?ar=1&k=xxxxx;size=invisible&cb=xxxx" width="256" height="60" role="presentation" name="a-o41nkahmlajt" frameborder="0" scrolling="no" sandbox="allow-forms allow-popups allow-same-origin allow-scripts allow-top-navigation allow-modals allow-popups-to-escape-sandbox allow-storage-access-by-user-activation"></iframe>
I confirmed that iframes with a relative src URL work (e.g. "/otherpage/on/same/host.html").
From this source I know that Office does not allow the navigation to any non-https end point.
I confirmed this by changing production html like I described here.
We can't change settings on the end-user clients because they are guest users.
Does anyone know how to allow specific external addresses for iframes in Office application's embedded browser? Is there maybe an alternative on how to embedd reCaptcha?

Opera Browser is downloading Youtube Video as File instead to load Flash

I am setting up a Server with Nginx on a Managed Server without sudo rights but with Plesk 12.5
When I load a Page with iFrame embed Youtube Video than Opera is download a File called with the name of the URL. Youtube Video https://www.youtube.com/v/5eaR5WVCjOw is download as a File "5eaR5WVCjOw".
On Console I see the message:
Resource interpreted as Document but transferred with MIME type
application/x-shockwave-flash: "https://www.youtube.com/v/5eaR5WVCjOw"
I thought adding "application/x-shockwave-flash swf;" will solve the problem but it still download a 5eaR5WVCjOw as file instead to load the flash.
You can embed this video with code:
<iframe width="560" height="315" src="https://www.youtube.com/embed/5eaR5WVCjOw" frameborder="0" allowfullscreen></iframe>
As here:
Opera version: 41.0.2353.57

Don't manage to get video displayed from win8.1 app store

I am trying to display a youtube video from an iframe in my application welcome page, however It does not work and I am getting the error :
APPHOST9613: The app couldn’t navigate to https://www.youtube.com/watch?v=9Zlpzk2qspg because of this error: FORBIDFRAMING.
I try to display it using an x-ms-webview then I get the message :
This video is unavailable.
The Adob Flash Player or an HTML5 supported browser is required
Get the latest flash player
Learn more about upgrading to an html5 browser
//However Adobe Flash player is already installed
the link 'Learn more about upgrading to an html5 browser' shows that the app integrated browser does NOT integrate formats H.264/MSE &H.264/WebM VP8/MSE & WebM VP9
Do you have any idea how to get it fixed ?
I ve managed to get it work with :
In HTML page >>
<iframe width="640" height="360" src="https://www.youtube.com/embed/9Zlpzk2qspg" frameborder="0" allowfullscreen>
In package.appxmanifest ContentURI >>
https://www.youtube.com/*/*

Resources