Hello Stack Overflow Community!
I really need some help with my most recent project. I am attempting to embed a Youtube Video from a Firebase Realtime Database. Inside the Database is the Embed Url, but when I try and put the data inside the src, it makes a blank iframe.
<iframe src="{item.embed}" />
What would I do to this link embeddable?
You can use react-youtube module for this purpose which uses youtube iFrame API for videos.
Find all the documentation in below link.
https://www.npmjs.com/package/react-youtube
Related
Quick question, I am doing some research on how to embed images from instagram profile without using the short code e.g. if this is the URL of the image: https://www.instagram.com/p/CdpH67-sZie/, CdpH67-sZie is the shortcode.
Now I have found a solution to embed them with short code using this library: https://www.npmjs.com/package/react-instagram-embed
Does anyone know if there is a way to embed images using their ID in React? While also doing my own research I figured it would be good to ask here as well just in case someone has already done this, I have found the way to get the ID of the image, but don't know how to implement that without using the link with short code.
You should try to fetch the images from the Instagram Graph API.
react-instagram-embed does this by using the aforementioned API but the repository seems abandoned as the documentation redirects to deprecated methods.
Which is why you could be better of forking the repo or just doing your own calls to the official API with for example axios.
I have this website were we can create new questions. Whenever a new question is created a new url is generated I want google to crawl my website everytime a new question is added and display it in google.
I have my front end in react js and backend in express js.
My front end is hosted in firebase and backend in heroku.
Since I am using javascript and my urls are all dynamicly generated google does not crawl or index them.
Currently I am writing all dymaicly created urls into a file in my root folder in backend called sitemap.txt.
What should i do to achive this?
my sitmap link
https://ask-over.herokuapp.com/sitemap.txt
my react apps link
https://wixten.com
my express.js link
https://ask-over.herokuapp.com
i want to add
https://ask-over.herokuapp.com/sitemap.txt to google search console
In fact create-react-app is the wrong tool when SEO matters. Because:
there is only one HTML file
there is no content inside the single HTML file
heavy first load
etc, [search about reasons of using nextjs a good article
SPAs are the best for PWAs, admin panels, and stuffs like this.
But take a look at https://nextjs.org/docs/migrating/from-create-react-app. And my suggestion is to make some plans to fully migrate to Next.js.
Also, search about react SEO best practies and use the helpers and utilities like React Helmet.
create-react-app is not the way to go if you are going for a seo friendly website.
if it's behind a login screen you can go with create-react-app.
if the site is a blog or documentation site , I would suggest you migrate to nextjs or gatsby js or if it's a very small webpage go with raw html, css , js
It's not possible for Google or any other web crawler to crawl your SPA Websites. The best way to fix this is either to use Server Side Frameworks like Next.js or use pre-rendering and redirect crawlers to pre rendering server instead of main website.
You can checkout prerender.io, it has the open source version as well, you can run it on a seperate server and use one of the snippets/plugins for your web server (apache/nginx/others) to redirect requests to different upstream server.
I've been using it for one of my projects (e-commerce store) built on VueJs and it works like a charm.
To understand the basics, what it does is it'll load your website in a browser, and cache the rendered code in it's database/cache, and when any crawler visits your website they'll be redirected to cache which is the generated html page of your website, and crawlers will be able to read everything smoothly.
I'm trying to upload a video on youtube in my react app using Youtube Data API, but the documentation is a mess.
Is there an example with the javascript SDK somewhere or I have to implement all the API calls one by one (not so simple if you want resumable uploads...)?
I am new to using headless cms and was wondering how to render content as a new page? I am building the site in Next.js and comfortable.io but I don't understand how making a new page in comfortable can be passed to the next.js project to produce the pages. Can someone please point me in the correct direction for what I need to learn to understand this?
To get data off your headless CMS you will have to hit the API endpoints provided. In order to render the CMS content on the server side you will have to do your get request to the API in the getInitialProps life cycle method.
After doing so next.js will render the page along with the fetched content to the client.
You can find more information in the documentation link here.
I want to make a conferencing app using Jitsi and add some of my own pages in it. Is it possible to navigate between my pages and jitsi conferencing page.
I've tried to understand the code and flow in the lib-jitsi-meet repository. Here's the github link https://github.com/jitsi/jitsi-meet
If you don't need a custom UI for the conferencing piece, a good idea (and easier) would be to use Jitsi Meet External API to embed conferencing in your application
https://github.com/jitsi/jitsi-meet/blob/master/doc/api.md
Jitsi provides two types of API documentation.
iFrame API:- You can easily add Jitsi as an Iframe.
lib-jitsi-meet : This will help for low-level development
For more details :-
https://jitsi.github.io/handbook/docs/dev-guide/dev-guide-iframe
https://jitsi.github.io/handbook/docs/dev-guide/dev-guide-ljm-api