Skip to main content
Webmasters

Return to Question

added 72 characters in body; edited tags; edited title
Source Link
unor
unor
  • 21.9k
  • 3
  • 47
  • 118

Schema and Rich Snippets for Embedded Youtubeembedded YouTube videos in an onclick iframe player?

My site has YoutubeYouTube thumbnails that when clicked, load a 90% full screen overlay on the page with the youtube video in an iframeiframe. JavascriptJavaScript creates the iframeiframe and the video is played.

So the videos are not technically embedded on the page until a user has clicked on the video title or thumbnail. The title and thumbnails are technically <a href="video" links with an onclickonclick event that loads them into the overlay iframeiframe player.

<div itemprop="video" itemscope itemtype="http://schema.org/VideoObject">
  <h2>Video: <span itemprop="name">Title</span></h2>
  <meta itemprop="duration" content="T1M33S" />
  <meta itemprop="thumbnailUrl" content="thumbnail.jpg" />
  <meta itemprop="contentURL" content="http://www.example.com/video123.flv" />
  <meta itemprop="embedURL" content="http://www.example.com/videoplayer.swf?video=123" />
  <meta itemprop="uploadDate" content="2011-07-05T08:00:00+08:00" />
  <meta itemprop="expires" content="2012-01-30T19:00:00+08:00" />
  <meta itemprop="height" content="400" />
  <meta itemprop="width" content="400" />
  <object ...>
    <param ...>
    <embed type="application/x-shockwave-flash" ...>
  </object>
  <span itemprop="description">Video description</span>
</div>

<div itemprop="video" itemscope itemtype="http://schema.org/VideoObject">
  <h2>Video: <span itemprop="name">Title</span></h2>
  <meta itemprop="duration" content="T1M33S" />
  <meta itemprop="thumbnailUrl" content="thumbnail.jpg" />
  <meta itemprop="contentURL" content="http://www.example.com/video123.flv" />
  <meta itemprop="embedURL" content="http://www.example.com/videoplayer.swf?video=123" />
  <meta itemprop="uploadDate" content="2011-07-05T08:00:00+08:00" />
  <meta itemprop="expires" content="2012-01-30T19:00:00+08:00" />
  <meta itemprop="height" content="400" />
  <meta itemprop="width" content="400" />
  <object ...>
    <param ...>
    <embed type="application/x-shockwave-flash" ...>
  </object>
  <span itemprop="description">Video description</span>
</div>

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "VideoObject",
  "name": "Title",
  "description": "Video description",
  "thumbnailUrl": "https://www.example.com/thumbnail.jpg",
  "uploadDate": "2015-02-05T08:00:00+08:00",
  "duration": "PT1M33S",
  "publisher": {
    "@type": "Organization",
    "name": "Example Publisher",
    "logo": {
      "@type": "ImageObject",
      "url": "https://example.com/logo.jpg",
      "width": 600,
      "height": 60
    }
  },
  "contentUrl": "https://www.example.com/video123.flv",
  "embedUrl": "https://www.example.com/videoplayer.swf?video=123",
  "interactionCount": "2347"
}
</script>

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "VideoObject",
  "name": "Title",
  "description": "Video description",
  "thumbnailUrl": "https://www.example.com/thumbnail.jpg",
  "uploadDate": "2015-02-05T08:00:00+08:00",
  "duration": "PT1M33S",
  "publisher": {
    "@type": "Organization",
    "name": "Example Publisher",
    "logo": {
      "@type": "ImageObject",
      "url": "https://example.com/logo.jpg",
      "width": 600,
      "height": 60
    }
  },
  "contentUrl": "https://www.example.com/video123.flv",
  "embedUrl": "https://www.example.com/videoplayer.swf?video=123",
  "interactionCount": "2347"
}
</script>

Schema and Rich Snippets for Embedded Youtube videos in an onclick iframe player?

My site has Youtube thumbnails that when clicked, load a 90% full screen overlay on the page with the youtube video in an iframe. Javascript creates the iframe and the video is played.

So the videos are not technically embedded on the page until a user has clicked on the video title or thumbnail. The title and thumbnails are technically <a href="video" links with an onclick event that loads them into the overlay iframe player.

<div itemprop="video" itemscope itemtype="http://schema.org/VideoObject">
  <h2>Video: <span itemprop="name">Title</span></h2>
  <meta itemprop="duration" content="T1M33S" />
  <meta itemprop="thumbnailUrl" content="thumbnail.jpg" />
  <meta itemprop="contentURL" content="http://www.example.com/video123.flv" />
  <meta itemprop="embedURL" content="http://www.example.com/videoplayer.swf?video=123" />
  <meta itemprop="uploadDate" content="2011-07-05T08:00:00+08:00" />
  <meta itemprop="expires" content="2012-01-30T19:00:00+08:00" />
  <meta itemprop="height" content="400" />
  <meta itemprop="width" content="400" />
  <object ...>
    <param ...>
    <embed type="application/x-shockwave-flash" ...>
  </object>
  <span itemprop="description">Video description</span>
</div>

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "VideoObject",
  "name": "Title",
  "description": "Video description",
  "thumbnailUrl": "https://www.example.com/thumbnail.jpg",
  "uploadDate": "2015-02-05T08:00:00+08:00",
  "duration": "PT1M33S",
  "publisher": {
    "@type": "Organization",
    "name": "Example Publisher",
    "logo": {
      "@type": "ImageObject",
      "url": "https://example.com/logo.jpg",
      "width": 600,
      "height": 60
    }
  },
  "contentUrl": "https://www.example.com/video123.flv",
  "embedUrl": "https://www.example.com/videoplayer.swf?video=123",
  "interactionCount": "2347"
}
</script>

Schema and Rich Snippets for embedded YouTube videos in an onclick iframe player?

My site has YouTube thumbnails that when clicked, load a 90% full screen overlay on the page with the youtube video in an iframe. JavaScript creates the iframe and the video is played.

So the videos are not technically embedded on the page until a user has clicked on the video title or thumbnail. The title and thumbnails are technically <a href="video" links with an onclick event that loads them into the overlay iframe player.

<div itemprop="video" itemscope itemtype="http://schema.org/VideoObject">
  <h2>Video: <span itemprop="name">Title</span></h2>
  <meta itemprop="duration" content="T1M33S" />
  <meta itemprop="thumbnailUrl" content="thumbnail.jpg" />
  <meta itemprop="contentURL" content="http://www.example.com/video123.flv" />
  <meta itemprop="embedURL" content="http://www.example.com/videoplayer.swf?video=123" />
  <meta itemprop="uploadDate" content="2011-07-05T08:00:00+08:00" />
  <meta itemprop="expires" content="2012-01-30T19:00:00+08:00" />
  <meta itemprop="height" content="400" />
  <meta itemprop="width" content="400" />
  <object ...>
    <param ...>
    <embed type="application/x-shockwave-flash" ...>
  </object>
  <span itemprop="description">Video description</span>
</div>

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "VideoObject",
  "name": "Title",
  "description": "Video description",
  "thumbnailUrl": "https://www.example.com/thumbnail.jpg",
  "uploadDate": "2015-02-05T08:00:00+08:00",
  "duration": "PT1M33S",
  "publisher": {
    "@type": "Organization",
    "name": "Example Publisher",
    "logo": {
      "@type": "ImageObject",
      "url": "https://example.com/logo.jpg",
      "width": 600,
      "height": 60
    }
  },
  "contentUrl": "https://www.example.com/video123.flv",
  "embedUrl": "https://www.example.com/videoplayer.swf?video=123",
  "interactionCount": "2347"
}
</script>
edited title
Link
Michael d
Michael d
  • 4.8k
  • 9
  • 27

Schema and Rich Snippets for Embedded Youtube videos in an onclick iframe player?

Source Link
Michael d
Michael d
  • 4.8k
  • 9
  • 27

Schema and Snippets for Embedded Youtube videos in an onclick iframe player?

My site has Youtube thumbnails that when clicked, load a 90% full screen overlay on the page with the youtube video in an iframe. Javascript creates the iframe and the video is played.

So the videos are not technically embedded on the page until a user has clicked on the video title or thumbnail. The title and thumbnails are technically <a href="video" links with an onclick event that loads them into the overlay iframe player.

Would it be wise for me to add schema and rich snippets to the page for each of the videos that are listed? Each page has roughly 40-50 videos. Can I add schema and snippets for all of these?

I would like to get the videos indexed in Google video search results and want to make sure that this is an acceptable way of using schema/snippets and that I'm in no risk of getting penalized by the bot for using schema when the videos aren't in iframes until clicked.

Here is the schema code I'm looking to use:

Schema:

<div itemprop="video" itemscope itemtype="http://schema.org/VideoObject">
  <h2>Video: <span itemprop="name">Title</span></h2>
  <meta itemprop="duration" content="T1M33S" />
  <meta itemprop="thumbnailUrl" content="thumbnail.jpg" />
  <meta itemprop="contentURL" content="http://www.example.com/video123.flv" />
  <meta itemprop="embedURL" content="http://www.example.com/videoplayer.swf?video=123" />
  <meta itemprop="uploadDate" content="2011-07-05T08:00:00+08:00" />
  <meta itemprop="expires" content="2012-01-30T19:00:00+08:00" />
  <meta itemprop="height" content="400" />
  <meta itemprop="width" content="400" />
  <object ...>
    <param ...>
    <embed type="application/x-shockwave-flash" ...>
  </object>
  <span itemprop="description">Video description</span>
</div>

Rich Snippet:

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "VideoObject",
  "name": "Title",
  "description": "Video description",
  "thumbnailUrl": "https://www.example.com/thumbnail.jpg",
  "uploadDate": "2015-02-05T08:00:00+08:00",
  "duration": "PT1M33S",
  "publisher": {
    "@type": "Organization",
    "name": "Example Publisher",
    "logo": {
      "@type": "ImageObject",
      "url": "https://example.com/logo.jpg",
      "width": 600,
      "height": 60
    }
  },
  "contentUrl": "https://www.example.com/video123.flv",
  "embedUrl": "https://www.example.com/videoplayer.swf?video=123",
  "interactionCount": "2347"
}
</script>