Flow player not playing video while sharing to facebook account - javascript

<meta property="og:url" content="http://103.231.125.106/nesos/fbsharenew.jsp" />
<meta property="og:site_name" content="Flowplayer" />
<meta property="og:type" content="movie" />
<meta property="og:title" content="Sharing plugin custom configured" />
<meta property="og:description" content="The Sharing plugin in a custom configuration" />
<meta property="og:video:height" content="360" />
<meta property="og:video:width" content="640" />
<meta property="og:image" content="http://d12zt1n3pd4xhr.cloudfront.net/fp/img/flow_eye.jpg" />
<meta property="og:image:secure_url" content="https://d12zt1n3pd4xhr.cloudfront.net/fp/img/flow_eye.jpg" />
<meta property="og:video:type" content="application/x-shockwave-flash" />
<meta property="og:video"
content="http://103.231.125.106/nesos/videoappsuser/flowplayer-3.2.18.swf?config={'clip':{'url':'http://103.231.125.106/nesos/videoappsuser/SampleVideo_1080x720_1mb.flv'}}" />
<meta property="og:video:secure_url"
content="https://103.231.125.106/nesos/videoappsuser/flowplayer-3.2.18.swf?config={'clip':{'url':'https://103.231.125.106/nesos/videoappsuser/SampleVideo_1080x720_1mb.flv'}}" />
http://103.231.125.106/nesos/fbsharenew.jsp
Video shared on facebook but not playing when i clicked in flow player, play button

Related

How to add JS embed script to React project

I am new to web development and have been practicing React by building a site. I need to embed multiple JS scripts to display 360 tours on the site. But can't get it to work. When I use the JS script embed it does not appear on site.
I have included the script in the public/index.html head as follow:
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<script
src="https://static.kuula.io/embed.js"
data-kuula="https://kuula.co/share/collection/7FN30?logo=-1&info=0&fs=1&vr=1&zoom=1&initload=0&thumbs=1"
data-css="ku-embed">
</script>
<title>React App</title>
</head>
Here is my code within the component:
import React from 'react';
import "./portfolio.css";
import { CTA } from '../../components';
const Portfolio = () => {
return (
<div className='portfolio' id="portfolio">
<div className="portfolio-heading">
<h1>Examples</h1>
<p>Experience virtual tours from the customer perspective</p>
</div>
<div className="portfolio-cards">
<div className="card-container-card">
<div className="card-container-card-img">
<script
src="https://static.kuula.io/embed.js"
data-kuula="https://kuula.co/share/collection/7FN30?logo=-1&info=0&fs=1&vr=1&zoom=1&initload=0&thumbs=1"
data-css="ku-embed">
</script>
</div>
<div className="card-container-card-title">
<p>Revel x Plato</p>
</div>
</div>
</div>
< CTA />
</div>
)
}
export default Portfolio

Blocked scripts in react

I don't understand why when executing a react em application it blocks the scripts that I have in the index.html
"Blocked script execution in 'data:text/html;charset=utf-8,%3C!DOCTYPE%20html%3E%0D%0A%3Chtml%20lang=%22en%22%3E%0D%0A%0D%0A%3Chead%3E%0D%0A%20%20%3Cmeta%20charset=%22utf-8%22%20/%3E%0D%0A%20%20%3Clink%20rel=%22icon%22%20href=%22/favicon.ico%22%20/%3E%0D%0A%20%20%3Cmeta%20http-equiv=%22Content-Security-Policy%22%20content=%22script-src%20'self'%20'unsafe-inline'%22%20/%3E%0D%0A%20%20%3Cmeta%20name=%22viewport%22%20content=%22width=device-width,%20initial-scale=1%22%20/%3E%0D%0A%20%20%3Cmeta%20name=%22theme-color%22%20content=%22%230000...%7B%20%7D%0D%0A%20%20%20%20%20%20TextDecoder.prototype.decode%20=%20function%20(arr)%20%7B%0D%0A%20%20%20%20%20%20%20%20let%20d%20=%20%22%22;%0D%0A%20%20%20%20%20%20%20%20for%20(let%20i%20=%200;%20i%20%3C%20arr.length;%20i%20+=%201)%20%7B%0D%0A%20%20%20%20%20%20%20%20%20%20d%20+=%20String.fromCharCode(arr%5Bi%5D);%0D%0A%20%20%20%20%20%20%20%20%7D%0D%0A%20%20%20%20%20%20%20%20return%20d;%0D%0A%20%20%20%20%20%20%7D%0D%0A%20%20%20%20%7D%0D%0A%20%20%3C/script%3E%20--%3E%0D%0A%3C/body%3E%0D%0A%0D%0A%3C/html%3E' because the document's frame is sandboxed and the 'allow-scripts' permission is not set.", source: data:text/html;charset=utf-8,%3C!DOCTYPE%20html%3E%0D%0A%3Chtml%20lang=%22en%22%3E%0D%0A%0D%0A%3Chead%3E%0D%0A%20%20%3Cmeta%20charset=%22utf-8%22%20/%3E%0D%0A%20%20%3Clink%20rel=%22icon%22%20href=%22/favicon.ico%22%20/%3E%0D%0A%20%20%3Cmeta%20http-equiv=%22Content-Security-Policy%22%20content=%22script-src%20'self'%20'unsafe-inline'%22%20/%3E%0D%0A%20%20%3Cmeta%20name=%22viewport%22%20content=%22width=device-width,%20initial-scale=1%22%20/%3E%0D%0A%20%20%3Cmeta%20name=%22theme-color%22%20content=%22%23000000%22%20/%3E%0D%0A%20%20%3Clink%20rel=%22apple-touch-icon%22%20href=%22/logo192.png%22%20/%3E%0D%0A%20%20%3Clink%20rel=%22manifest%22%20href=%22/manifest.json%22%20/%3E%0D%0A%20%20%3Clink%20rel=%22preconnect%22%20href=%22https://fonts.googleapis.com%22%20/%3E%0D%0A%20%20%3Clink%20rel=%22preconnect%22%20href=%22https://fonts.gstatic.com%22%20crossorigin%20/%3E%0D%0A%20%20%3Clink%0D%0A%20%20%20%20href=%22https://fonts.googleapis.com/css2?family=Montserrat:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap%22%0D%0A%20%20%20%20rel=%22stylesheet%22%20/%3E%0D%0A%0D%0A%0D%0A%20%20%3Ctitle%3EVisitik%20Control%3C/title%3E%0D%0A%3Cscript%20defer%20src=%22/static/js/bundle.js%22%3E%3C/script%3E%3C/head%3E%0D%0A%0D%0A%3Cbody%20class=%22h-screen%20m-0%20overflow-hidden%22%3E%0D%0A%20%20%3Cdiv%20id=%22root%22%20class=%22h-screen%22%3E%3C/div%3E%0D%0A%20%20%3Cscript%20src=%22websdk.client.bundle.min.js%22%3E%3C/script%3E%0D%0A%20%20%3Cscript%20src=%22fingerprint.sdk.min.js%22%3E%3C/script%3E%0D%0A%20%20%3C!--%20%3Cscript%20src=%22https://polyfill.io/v3/polyfill.min.js?features=Symbol%252Cfetch%252CString.prototype.endsWith%252CObject.assign%252CArray.prototype.findIndex%252CArray.prototype.includes%22%3E%3C/script%3E%0D%0A%20%20%3Cscript%20type=%22text/javascript%22%20src=%22modules/websdk/index.js%22%3E%3C/script%3E%0D%0A%20%20%3Cscript%20id=%22TextEncoder-shim%22%3E%0D%0A%20%20%20%20if%20(typeof%20(TextEncoder)%20===%20%27undefined%27)%20%7B%0D%0A%20%20%20%20%20%20TextEncoder%20=%20function%20TextEncoder()%20%7B%20%7D%0D%0A%20%20%20%20%20%20TextEncoder.prototype.encode%20=%20function%20(s)%20%7B%0D%0A%20%20%20%20%20%20%20%20const%20e%20=%20new%20Uint8Array(s.length);%0D%0A%20%20%20%20%20%20%20%20for%20(let%20i%20=%200;%20i%20%3C%20s.length;%20i%20+=%201)%20%7B%0D%0A%20%20%20%20%20%20%20%20%20%20e%5Bi%5D%20=%20s.charCodeAt(i);%0D%0A%20%20%20%20%20%20%20%20%7D%0D%0A%20%20%20%20%20%20%20%20return%20e;%0D%0A%20%20%20%20%20%20%7D%0D%0A%20%20%20%20%7D%0D%0A%0D%0A%20%20%20%20if%20(typeof%20(TextDecoder)%20===%20%27undefined%27)%20%7B%0D%0A%20%20%20%20%20%20TextDecoder%20=%20function%20TextDecoder()%20%7B%20%7D%0D%0A%20%20%20%20%20%20TextDecoder.prototype.decode%20=%20function%20(arr)%20%7B%0D%0A%20%20%20%20%20%20%20%20let%20d%20=%20%22%22;%0D%0A%20%20%20%20%20%20%20%20for%20(let%20i%20=%200;%20i%20%3C%20arr.length;%20i%20+=%201)%20%7B%0D%0A%20%20%20%20%20%20%20%20%20%20d%20+=%20String.fromCharCode(arr%5Bi%5D);%0D%0A%20%20%20%20%20%20%20%20%7D%0D%0A%20%20%20%20%20%20%20%20return%20d;%0D%0A%20%20%20%20%20%20%7D%0D%0A%20%20%20%20%7D%0D%0A%20%20%3C/script%3E%20--%3E%0D%0A%3C/body%3E%0D%0A%0D%0A%3C/html%3E (0)
[electron] [6944:0924/095549.592:ERROR:CONSOLE(0)] "Blocked script execution in 'data:text/html;charset=utf-8,%3C!DOCTYPE%20html%3E%0D%0A%3Chtml%20lang=%22en%22%3E%0D%0A%0D%0A%3Chead%3E%0D%0A%20%20%3Cmeta%20charset=%22utf-8%22%20/%3E%0D%0A%20%20%3Clink%20rel=%22icon%22%20href=%22/favicon.ico%22%20/%3E%0D%0A%20%20%3Cmeta%20http-equiv=%22Content-Security-Policy%22%20content=%22script-src%20'self'%20'unsafe-inline'%22%20/%3E%0D%0A%20%20%3Cmeta%20name=%22viewport%22%20content=%22width=device-width,%20initial-scale=1%22%20/%3E%0D%0A%20%20%3Cmeta%20name=%22theme-color%22%20content=%22%230000...%7B%20%7D%0D%0A%20%20%20%20%20%20TextDecoder.prototype.decode%20=%20function%20(arr)%20%7B%0D%0A%20%20%20%20%20%20%20%20let%20d%20=%20%22%22;%0D%0A%20%20%20%20%20%20%20%20for%20(let%20i%20=%200;%20i%20%3C%20arr.length;%20i%20+=%201)%20%7B%0D%0A%20%20%20%20%20%20%20%20%20%20d%20+=%20String.fromCharCode(arr%5Bi%5D);%0D%0A%20%20%20%20%20%20%20%20%7D%0D%0A%20%20%20%20%20%20%20%20return%20d;%0D%0A%20%20%20%20%20%20%7D%0D%0A%20%20%20%20%7D%0D%0A%20%20%3C/script%3E%20--%3E%0D%0A%3C/body%3E%0D%0A%0D%0A%3C/html%3E' because the document's frame is sandboxed and the 'allow-scripts' permission is not set.", source: data:text/html;charset=utf-8,%3C!DOCTYPE%20html%3E%0D%0A%3Chtml%20lang=%22en%22%3E%0D%0A%0D%0A%3Chead%3E%0D%0A%20%20%3Cmeta%20charset=%22utf-8%22%20/%3E%0D%0A%20%20%3Clink%20rel=%22icon%22%20href=%22/favicon.ico%22%20/%3E%0D%0A%20%20%3Cmeta%20http-equiv=%22Content-Security-Policy%22%20content=%22script-src%20'self'%20'unsafe-inline'%22%20/%3E%0D%0A%20%20%3Cmeta%20name=%22viewport%22%20content=%22width=device-width,%20initial-scale=1%22%20/%3E%0D%0A%20%20%3Cmeta%20name=%22theme-color%22%20content=%22%23000000%22%20/%3E%0D%0A%20%20%3Clink%20rel=%22apple-touch-icon%22%20href=%22/logo192.png%22%20/%3E%0D%0A%20%20%3Clink%20rel=%22manifest%22%20href=%22/manifest.json%22%20/%3E%0D%0A%20%20%3Clink%20rel=%22preconnect%22%20href=%22https://fonts.googleapis.com%22%20/%3E%0D%0A%20%20%3Clink%20rel=%22preconnect%22%20href=%22https://fonts.gstatic.com%22%20crossorigin%20/%3E%0D%0A%20%20%3Clink%0D%0A%20%20%20%20href=%22https://fonts.googleapis.com/css2?family=Montserrat:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap%22%0D%0A%20%20%20%20rel=%22stylesheet%22%20/%3E%0D%0A%0D%0A%0D%0A%20%20%3Ctitle%3EVisitik%20Control%3C/title%3E%0D%0A%3Cscript%20defer%20src=%22/static/js/bundle.js%22%3E%3C/script%3E%3C/head%3E%0D%0A%0D%0A%3Cbody%20class=%22h-screen%20m-0%20overflow-hidden%22%3E%0D%0A%20%20%3Cdiv%20id=%22root%22%20class=%22h-screen%22%3E%3C/div%3E%0D%0A%20%20%3Cscript%20src=%22websdk.client.bundle.min.js%22%3E%3C/script%3E%0D%0A%20%20%3Cscript%20src=%22fingerprint.sdk.min.js%22%3E%3C/script%3E%0D%0A%20%20%3C!--%20%3Cscript%20src=%22https://polyfill.io/v3/polyfill.min.js?features=Symbol%252Cfetch%252CString.prototype.endsWith%252CObject.assign%252CArray.prototype.findIndex%252CArray.prototype.includes%22%3E%3C/script%3E%0D%0A%20%20%3Cscript%20type=%22text/javascript%22%20src=%22modules/websdk/index.js%22%3E%3C/script%3E%0D%0A%20%20%3Cscript%20id=%22TextEncoder-shim%22%3E%0D%0A%20%20%20%20if%20(typeof%20(TextEncoder)%20===%20%27undefined%27)%20%7B%0D%0A%20%20%20%20%20%20TextEncoder%20=%20function%20TextEncoder()%20%7B%20%7D%0D%0A%20%20%20%20%20%20TextEncoder.prototype.encode%20=%20function%20(s)%20%7B%0D%0A%20%20%20%20%20%20%20%20const%20e%20=%20new%20Uint8Array(s.length);%0D%0A%20%20%20%20%20%20%20%20for%20(let%20i%20=%200;%20i%20%3C%20s.length;%20i%20+=%201)%20%7B%0D%0A%20%20%20%20%20%20%20%20%20%20e%5Bi%5D%20=%20s.charCodeAt(i);%0D%0A%20%20%20%20%20%20%20%20%7D%0D%0A%20%20%20%20%20%20%20%20return%20e;%0D%0A%20%20%20%20%20%20%7D%0D%0A%20%20%20%20%7D%0D%0A%0D%0A%20%20%20%20if%20(typeof%20(TextDecoder)%20===%20%27undefined%27)%20%7B%0D%0A%20%20%20%20%20%20TextDecoder%20=%20function%20TextDecoder()%20%7B%20%7D%0D%0A%20%20%20%20%20%20TextDecoder.prototype.decode%20=%20function%20(arr)%20%7B%0D%0A%20%20%20%20%20%20%20%20let%20d%20=%20%22%22;%0D%0A%20%20%20%20%20%20%20%20for%20(let%20i%20=%200;%20i%20%3C%20arr.length;%20i%20+=%201)%20%7B%0D%0A%20%20%20%20%20%20%20%20%20%20d%20+=%20String.fromCharCode(arr%5Bi%5D);%0D%0A%20%20%20%20%20%20%20%20%7D%0D%0A%20%20%20%20%20%20%20%20return%20d;%0D%0A%20%20%20%20%20%20%7D%0D%0A%20%20%20%20%7D%0D%0A%20%20%3C/script%3E%20--%3E%0D%0A%3C/body%3E%0D%0A%0D%0A%3C/html%3E (0)
[electron] [6944:0924/095549.592:ERROR:CONSOLE(0)] "Blocked script execution in 'data:text/html;charset=utf-8,%3C!DOCTYPE%20html%3E%0D%0A%3Chtml%20lang=%22en%22%3E%0D%0A%0D%0A%3Chead%3E%0D%0A%20%20%3Cmeta%20charset=%22utf-8%22%20/%3E%0D%0A%20%20%3Clink%20rel=%22icon%22%20href=%22/favicon.ico%22%20/%3E%0D%0A%20%20%3Cmeta%20http-equiv=%22Content-Security-Policy%22%20content=%22script-src%20'self'%20'unsafe-inline'%22%20/%3E%0D%0A%20%20%3Cmeta%20name=%22viewport%22%20content=%22width=device-width,%20initial-scale=1%22%20/%3E%0D%0A%20%20%3Cmeta%20name=%22theme-color%22%20content=%22%230000...%7B%20%7D%0D%0A%20%20%20%20%20%20TextDecoder.prototype.decode%20=%20function%20(arr)%20%7B%0D%0A%20%20%20%20%20%20%20%20let%20d%20=%20%22%22;%0D%0A%20%20%20%20%20%20%20%20for%20(let%20i%20=%200;%20i%20%3C%20arr.length;%20i%20+=%201)%20%7B%0D%0A%20%20%20%20%20%20%20%20%20%20d%20+=%20String.fromCharCode(arr%5Bi%5D);%0D%0A%20%20%20%20%20%20%20%20%7D%0D%0A%20%20%20%20%20%20%20%20return%20d;%0D%0A%20%20%20%20%20%20%7D%0D%0A%20%20%20%20%7D%0D%0A%20%20%3C/script%3E%20--%3E%0D%0A%3C/body%3E%0D%0A%0D%0A%3C/html%3E' because the document's frame is sandboxed and the 'allow-scripts' permission is not set.", source: data:text/html;charset=utf-8,%3C!DOCTYPE%20html%3E%0D%0A%3Chtml%20lang=%22en%22%3E%0D%0A%0D%0A%3Chead%3E%0D%0A%20%20%3Cmeta%20charset=%22utf-8%22%20/%3E%0D%0A%20%20%3Clink%20rel=%22icon%22%20href=%22/favicon.ico%22%20/%3E%0D%0A%20%20%3Cmeta%20http-equiv=%22Content-Security-Policy%22%20content=%22script-src%20'self'%20'unsafe-inline'%22%20/%3E%0D%0A%20%20%3Cmeta%20name=%22viewport%22%20content=%22width=device-width,%20initial-scale=1%22%20/%3E%0D%0A%20%20%3Cmeta%20name=%22theme-color%22%20content=%22%23000000%22%20/%3E%0D%0A%20%20%3Clink%20rel=%22apple-touch-icon%22%20href=%22/logo192.png%22%20/%3E%0D%0A%20%20%3Clink%20rel=%22manifest%22%20href=%22/manifest.json%22%20/%3E%0D%0A%20%20%3Clink%20rel=%22preconnect%22%20href=%22https://fonts.googleapis.com%22%20/%3E%0D%0A%20%20%3Clink%20rel=%22preconnect%22%20href=%22https://fonts.gstatic.com%22%20crossorigin%20/%3E%0D%0A%20%20%3Clink%0D%0A%20%20%20%20href=%22https://fonts.googleapis.com/css2?family=Montserrat:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap%22%0D%0A%20%20%20%20rel=%22stylesheet%22%20/%3E%0D%0A%0D%0A%0D%0A%20%20%3Ctitle%3EVisitik%20Control%3C/title%3E%0D%0A%3Cscript%20defer%20src=%22/static/js/bundle.js%22%3E%3C/script%3E%3C/head%3E%0D%0A%0D%0A%3Cbody%20class=%22h-screen%20m-0%20overflow-hidden%22%3E%0D%0A%20%20%3Cdiv%20id=%22root%22%20class=%22h-screen%22%3E%3C/div%3E%0D%0A%20%20%3Cscript%20src=%22websdk.client.bundle.min.js%22%3E%3C/script%3E%0D%0A%20%20%3Cscript%20src=%22fingerprint.sdk.min.js%22%3E%3C/script%3E%0D%0A%20%20%3C!--%20%3Cscript%20src=%22https://polyfill.io/v3/polyfill.min.js?features=Symbol%252Cfetch%252CString.prototype.endsWith%252CObject.assign%252CArray.prototype.findIndex%252CArray.prototype.includes%22%3E%3C/script%3E%0D%0A%20%20%3Cscript%20type=%22text/javascript%22%20src=%22modules/websdk/index.js%22%3E%3C/script%3E%0D%0A%20%20%3Cscript%20id=%22TextEncoder-shim%22%3E%0D%0A%20%20%20%20if%20(typeof%20(TextEncoder)%20===%20%27undefined%27)%20%7B%0D%0A%20%20%20%20%20%20TextEncoder%20=%20function%20TextEncoder()%20%7B%20%7D%0D%0A%20%20%20%20%20%20TextEncoder.prototype.encode%20=%20function%20(s)%20%7B%0D%0A%20%20%20%20%20%20%20%20const%20e%20=%20new%20Uint8Array(s.length);%0D%0A%20%20%20%20%20%20%20%20for%20(let%20i%20=%200;%20i%20%3C%20s.length;%20i%20+=%201)%20%7B%0D%0A%20%20%20%20%20%20%20%20%20%20e%5Bi%5D%20=%20s.charCodeAt(i);%0D%0A%20%20%20%20%20%20%20%20%7D%0D%0A%20%20%20%20%20%20%20%20return%20e;%0D%0A%20%20%20%20%20%20%7D%0D%0A%20%20%20%20%7D%0D%0A%0D%0A%20%20%20%20if%20(typeof%20(TextDecoder)%20===%20%27undefined%27)%20%7B%0D%0A%20%20%20%20%20%20TextDecoder%20=%20function%20TextDecoder()%20%7B%20%7D%0D%0A%20%20%20%20%20%20TextDecoder.prototype.decode%20=%20function%20(arr)%20%7B%0D%0A%20%20%20%20%20%20%20%20let%20d%20=%20%22%22;%0D%0A%20%20%20%20%20%20%20%20for%20(let%20i%20=%200;%20i%20%3C%20arr.length;%20i%20+=%201)%20%7B%0D%0A%20%20%20%20%20%20%20%20%20%20d%20+=%20String.fromCharCode(arr%5Bi%5D);%0D%0A%20%20%20%20%20%20%20%20%7D%0D%0A%20%20%20%20%20%20%20%20return%20d;%0D%0A%20%20%20%20%20%20%7D%0D%0A%20%20%20%20%7D%0D%0A%20%20%3C/script%3E%20--%3E%0D%0A%3C/body%3E%0D%0A%0D%0A%3C/html%3E (0)
This is my index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline'" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
rel="stylesheet" />
<title>Visitik Control</title>
</head>
<body class="h-screen m-0 overflow-hidden">
<div id="root" class="h-screen"></div>
<script src="websdk.client.bundle.min.js"></script> <--Blocked
<script src="fingerprint.sdk.min.js"></script> <--Blocked
</body>
</html>

How to create a popup modal in react js and position it close to the modal

i'm new to react JS i wanted to make a popup modal when i click on some button but i want it to position itself close to that button that i clicked ! i used the portal method but that won't position it close to the button so you will have to position it your self but it won't be a good practice ! so i there any other way to do it ? ! and also when the modal popup i want to close when i click on anywhere on the screen not including it self !
PORTAL METHOD :
import React, { Fragment } from "react";
import ReactDOM from "react-dom";
const Popup = (props) => {
if (!props.open) {
return null;
}
return (
<Fragment>
{ReactDOM.createPortal(
<div
className="popupContainer"
style={{ position: "absolute", top: 0 }}
>
<h2>ghhhh</h2>
</div>,
document.getElementById("popup")
)}
</Fragment>
);
};
export default Popup;
<div className="btnContainer">
<button
className="btn btn-primary"
onClick={() => {
setOpen(true);
}}
>
Show modal
</button>
<Popup open={open} />
</div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React Redux App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<div id="popup"></div>
</body>
</html>

How to Update Dynamic Meta Tags using Reactjs

I Fetch Data From Server and I want to show dynamic meta title and description but when i set dynamic data in inspect element it show's dynamic values but not updated in page source and also when share on social media like whatsapp, facebook etc it not showing dynamic title and description.
const MetaTag = (props) => {
const { pageTitle, metaTitle, metaDescription } = props;
return (
<Helmet>
<title>{pageTitle}</title>
{/* <!-- Primary Meta Tags --> */}
<meta name="title" content={metaTitle} />
<meta name="description" content={metaDescription} />
{/* <!-- Open Graph / Facebook --> */}
<meta property="og:type" content="website" />
<meta property="og:url" content="https://google.com/" />
<meta property="og:title" content={metaTitle} />
<meta property="og:description" content={metaDescription} />
<meta property="og:image" content="%PUBLIC_URL%/apple-icon-57x57.png" />
{/* <!-- Twitter --> */}
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:url" content="https://google.com/" />
<meta property="twitter:title" content={metaTitle} />
<meta property="twitter:description" content={metaDescription} />
<meta
property="twitter:image"
content="%PUBLIC_URL%/apple-icon-57x57.png"
/>
</Helmet>
);
};
It shows dynamic meta title and description in inspect element but when i do ctrl + u in page source it not showing dynamic meta title and description also when i share my site from mobile to facebook,whatsapp it can't show correct meta title and description

How to completely set page title and description in React.js using Helmet

I'm trying to set a page's title and description via Helmet
Here is my code:
import React, { Component, useRef } from "react";
import { Helmet } from 'react-helmet';
const PageSample = (props) => {
return (
<Helmet>
<meta charSet="utf-8" />
<title>
Some Title
</title>
<meta name="description" content="Some Description" />
</Helmet>
);
};
export default PageSample;
At here, it shows it on the page. But I recognized that, when I try to share link (whatsapp or something else) it doesn't provide this title and description of head tags.
How can I set these values?

Try these additional tags:
const title = 'Title';
const description = 'Description';
return (
<Helmet htmlAttributes={{ lang: 'en' }}>
{/* General tags */}
<title>{title}</title>
<meta name="description" content={description} />
{/* OpenGraph tags */}
<meta property="og:title" content={title} />
<meta property="og:description" content={description} />
<meta property="og:type" content="website" />
{/* Twitter Card tags */}
<meta name="twitter:card" content="summary" />
<meta name="twitter:creator" content="#rbika" />
<meta name="twitter:title" content={title} />
<meta name="twitter:description" content={description} />
</Helmet>
);
You can find more information about these tags here: Open Graph Protocol, Twitter Card Tags.

Categories

Resources