Hello, I am having trouble getting a YouTube video to appear. I see only the call code, not the video itself!
module.exports = {
siteMetadata: {
siteUrl: "https://piya.party",
title: "Portfolio",
author: "Piya Willwerth"
},
plugins: [
{
resolve: "gatsby-transformer-remark",
options: {
plugins: [
{
resolve: "gatsby-remark-embed-video",
options: {
width: 800,
ratio: 1.77, // Optional: Defaults to 16/9 = 1.77
height: 400, // Optional: Overrides optional.ratio
related: false, //Optional: Will remove related videos from the end of an embedded YouTube video.
noIframeBorder: true, //Optional: Disable insertion of <style> border: 0
loadingStrategy: 'lazy', //Optional: Enable support for lazy-load offscreen iframes. Default is disabled.
urlOverrides: [
{
id: "youtube",
embedURL: videoId =>
`https://www.youtube-nocookie.com/embed/${videoId}`,
},
], //Optional: Override URL of a service provider, e.g to enable youtube-nocookie support
containerClass: "embedVideo-container", //Optional: Custom CSS class for iframe container, for multiple classes separate them by space
iframeId: false, //Optional: if true, iframe's id will be set to what is provided after 'video:' (YouTube IFrame player API requires iframe id)
},
},
"gatsby-remark-images",
"gatsby-remark-responsive-iframe",
],
},
},
"gatsby-plugin-image",
"gatsby-remark-relative-images",
"gatsby-plugin-react-helmet",
"gatsby-plugin-sass",
"gatsby-plugin-sitemap",
"gatsby-transformer-sharp",
"gatsby-plugin-sharp",
{
resolve: `gatsby-plugin-google-fonts-v2`,
options: {
fonts: [
{
family: 'BioRhyme',
weights: ['300', '700']
},
{
family: 'Montserrat',
weights: ['400', '700']
},
]
}
},
{
resolve: `gatsby-plugin-manifest`,
options: {
name: "Piya Willwerth",
short_name: "piyawill",
start_url: "/",
background_color: "#E5E7EB",
theme_color: "#4B5563",
display: "standalone",
icon: `src/images/favicon.png`,
}
},
{
resolve: `gatsby-plugin-mdx`,
options: {
gatsbyRemarkPlugins: [
{
resolve: `gatsby-remark-images`,
options: {
maxWidth: 750,
linkImagesToOriginal: false
},
},
],
},
},
{
resolve: "gatsby-source-filesystem",
options: {
name: "src",
path: `${__dirname}/src/`,
},
},
{
resolve: "gatsby-plugin-react-svg",
options: {
rule: {
include: /assets/,
},
},
},
],
};
`youtube: https://www.youtube.com/watch?v=4TUeuYcdniU`