{"id":74,"date":"2018-03-16T21:26:35","date_gmt":"2018-03-16T21:26:35","guid":{"rendered":"https:\/\/openbook.ums.edu.my\/userguide\/chapter\/display-embedded-media\/"},"modified":"2024-09-19T04:19:24","modified_gmt":"2024-09-19T04:19:24","slug":"display-embedded-media","status":"publish","type":"chapter","link":"https:\/\/openbook.ums.edu.my\/userguide\/chapter\/display-embedded-media\/","title":{"raw":"Display Embedded Media","rendered":"Display Embedded Media"},"content":{"raw":"Pressbooks allows you to include a variety of embedded media in your book. You have likely encountered content like this all over the web: YouTube videos in blog posts, Tweets embedded in news articles, or timelines and simulations on an educational site. Many of the same kinds of media or interactive content can be included in your book, allowing your readers to watch videos, view interactive maps, engage with simulations, and more without ever leaving your book.\n<h1>Display Uploaded Media in Your Book<\/h1>\nYou can upload some media files, like images and reasonably sized audio files, directly to your book's <a href=\"https:\/\/pressbooks.pub\/guide\/chapter\/media-2\/\">media library<\/a>. Media from your book's media library can be embedded using the 'Add' Media' button located just above the visual editor. The following is a partial list of supported media file types (your network may allow you to upload additional file types):\n<table class=\"grid\" style=\"border-collapse: collapse; width: 100%;\" border=\"1\">\n<tbody>\n<tr>\n<td style=\"width: 25%;\">Images<\/td>\n<td style=\"width: 25%;\">Audio<\/td>\n<td style=\"width: 25%;\">Video<\/td>\n<td style=\"width: 25%;\">Files<\/td>\n<\/tr>\n<tr>\n<td style=\"width: 25%;\">\n<ul>\n \t<li>jpg<\/li>\n \t<li>jpeg<\/li>\n \t<li>png<\/li>\n \t<li>gif<\/li>\n<\/ul>\n<\/td>\n<td style=\"width: 25%;\">\n<ul>\n \t<li>mp3<\/li>\n \t<li>midi<\/li>\n \t<li>MID<\/li>\n \t<li>m4a<\/li>\n<\/ul>\n<\/td>\n<td style=\"width: 25%;\">\n<ul>\n \t<li>mov<\/li>\n \t<li>avi<\/li>\n \t<li>wmv<\/li>\n \t<li>mp4<\/li>\n<\/ul>\n<\/td>\n<td style=\"width: 25%;\">\n<ul>\n \t<li>pdf<\/li>\n \t<li>epub<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<div class=\"textbox\"><strong>NOTE: <\/strong>We discourage users from uploading video directly to their Pressbooks media library in most cases because it's difficult to provide universal playback support for most videos across all browsers and because video files are often larger than your maximum file upload size. Embedding from a dedicated video streaming service (like YouTube, Vimeo, or Kaltura) is almost always a better choice for including video in your book.<\/div>\n<h1><a id=\"howtoembedcontent\" href=\"\"><\/a>Embed Content via oEmbed<\/h1>\nYou can automatically embed media from <a href=\"https:\/\/wordpress.org\/support\/article\/embeds\/#okay-so-what-sites-can-i-embed-from\">a variety of providers<\/a> (like YouTube, Twitter, Vimeo, TED, Flickr, Reddit, TikTok, Spotify, and more) which support the oEmbed specification. <span style=\"text-align: initial; font-size: 1em;\">To embed content from a supported oembed provider:<\/span>\n<ol>\n \t<li style=\"font-weight: 400;\">Copy the URL of the video, audio, or other media (i.e. <code>https:\/\/www.youtube.com\/watch?v=hrcrFJVgbbs<\/code>)<\/li>\n \t<li style=\"font-weight: 400;\">Paste the URL onto its own line into the <strong>Visual<\/strong> editor<\/li>\n \t<li style=\"font-weight: 400;\"><span style=\"orphans: 1; text-align: initial; widows: 2; font-size: 1em;\">Click <strong>Save\u00a0<\/strong><\/span><\/li>\n<\/ol>\nThe URL you pasted in step two, should be automatically replaced by the embedded content in the visual editor. After you save the chapter or post, the content will display in the webbook and can be seen by readers if the book is made public.\n<h1>Embed iframes<\/h1>\nPressbooks restricts the embedding on iframes from most other sites for security reasons. We will allow iframes to be embedded from the following providers, however:\n<ul>\n \t<li><a href=\"https:\/\/phet.colorado.edu\/\">PhET Interactive Simulations<\/a><\/li>\n \t<li><a href=\"https:\/\/timeline.knightlab.com\/\">knight lab Timeline<\/a><\/li>\n \t<li><a href=\"https:\/\/www.brightcove.com\/en\/\">Brightcove<\/a><\/li>\n \t<li><a href=\"https:\/\/docs.google.com\/forms\/\">Google Forms<\/a><\/li>\n \t<li><a href=\"https:\/\/www.google.com\/maps\/\">Google Maps<\/a><\/li>\n<\/ul>\n<div class=\"textbox\"><strong>Note: <\/strong>Network managers can permit the embedding of iframes from any other trusted provider\u00a0via <a href=\"https:\/\/networkmanagerguide.pressbooks.com\/chapter\/network-options\/#chapter-464-section-8\">a network-specific iframe allowlist<\/a>. Contact your network manager with questions about embedding iframes from sources other than those listed above.<\/div>\n&nbsp;\n<div>\n\nTo embed an iframe from a source that has been permitted for your network:\n<ol>\n \t<li style=\"font-weight: 400;\">Copy the source object's &lt;iframe&gt; embed code (this is usually available in the sharing options of the media on its source website)<\/li>\n \t<li style=\"font-weight: 400;\">Switch to the <a href=\"https:\/\/pressbooks.pub\/guide\/chapter\/edit-content-with-the-visual-text-editors#texteditortoolbar\">Text editor<\/a> in Pressbooks and <strong>paste the iframe code\u00a0<\/strong>you copied in step 1.<\/li>\n \t<li style=\"font-weight: 400;\">Click <strong>Save<\/strong><\/li>\n<\/ol>\nIf the source comes from a permitted domain, and you have copied in the source object's &lt;iframe&gt; embed code, the video should then appear in your visual editor and webbook. If you're unable to embed an iframe from a source because it isn't allowed for your network, consider simply adding a hyperlink to the resource.\n\n<\/div>\n<div>\n<h1>Use Embed and Media Shortcodes<\/h1>\nPressbooks supports two <a href=\"https:\/\/pressbooks.pub\/guide\/chapter\/shortcodes\/\">shortcodes<\/a>, <strong>Embed <\/strong>and <strong>Media<\/strong>. The embed shortcode is most useful when you're drafting content outside of Pressbooks (in a word processor, for example) but want to import it later. Using the embed shortcode signals to Pressbooks that there's an embedded video and not just a regular link in your book. Here's a sample embed shortcode: <code><strong>[em\u200bbed<\/strong><strong>]https:\/\/www.youtube.com\/watch?v=hrcrFJVgbbs<\/strong><strong>[\/em\u200bbed]<\/strong><\/code><strong>\u00a0<\/strong>\n\nThe media shortcode allows you to embed an externally hosted media file (like an image) and includes an optional parameter which will let you define a caption for that embedded media element. Here's a sample media shortcode (with caption) for a photograph of the Hagia Sophia which is hosted on Wikimedia: <code style=\"orphans: 1; text-align: initial; widows: 2;\"><strong>[media src=\"https:\/\/commons.wikimedia.org\/wiki\/Category:Hagia_Sophia#\/media\/File:Hagia_Sophia_Mars_2013.jpg\" caption=\"The Hagia Sophia. This photograph was taken by Arild V\u00e5gen and is licensed under a CC-BY-SA license\" ]<\/strong><\/code>\n<h1>Insert H5P Activities<\/h1>\nMany Pressbooks networks designed for educational publishing include an integration with H5P, a powerful open source tool that allows you to insert interactive quizzes and other learning activities directly into your webbook. <a href=\"https:\/\/pressbooks.pub\/guide\/chapter\/create-interactive-content-with-h5p\/\">Learn more about creating H5P activities in your book.<\/a>\n<div class=\"textbox shaded\"><strong>H5P creation is not available to authors on Pressbooks.com<\/strong>. If you're interested in using H5P in your book project, please contact <a href=\"mailto:sales@pressbooks.com\">sales@pressbooks.com<\/a>.<\/div>\n<h1>Embedded Media in Exports<\/h1>\nNot all embedded media can be displayed in ebook and PDF files. Pressbooks attempts to provide a graceful fallback for any embedded content which cannot be displayed with its proper functionality in any of our export formats. This fallback consists of an inserted message that is populated with information available in the system (may include a title, thumbnail, the kind of media, etc.) and provides the reader with a link to the webbook version of the chapter so they can view the missing element (print readers will see a short URL that they can type into a browser).\n\n<\/div>","rendered":"<p>Pressbooks allows you to include a variety of embedded media in your book. You have likely encountered content like this all over the web: YouTube videos in blog posts, Tweets embedded in news articles, or timelines and simulations on an educational site. Many of the same kinds of media or interactive content can be included in your book, allowing your readers to watch videos, view interactive maps, engage with simulations, and more without ever leaving your book.<\/p>\n<h1>Display Uploaded Media in Your Book<\/h1>\n<p>You can upload some media files, like images and reasonably sized audio files, directly to your book&#8217;s <a href=\"https:\/\/pressbooks.pub\/guide\/chapter\/media-2\/\">media library<\/a>. Media from your book&#8217;s media library can be embedded using the &#8216;Add&#8217; Media&#8217; button located just above the visual editor. The following is a partial list of supported media file types (your network may allow you to upload additional file types):<\/p>\n<table class=\"grid\" style=\"border-collapse: collapse; width: 100%;\">\n<tbody>\n<tr>\n<td style=\"width: 25%;\">Images<\/td>\n<td style=\"width: 25%;\">Audio<\/td>\n<td style=\"width: 25%;\">Video<\/td>\n<td style=\"width: 25%;\">Files<\/td>\n<\/tr>\n<tr>\n<td style=\"width: 25%;\">\n<ul>\n<li>jpg<\/li>\n<li>jpeg<\/li>\n<li>png<\/li>\n<li>gif<\/li>\n<\/ul>\n<\/td>\n<td style=\"width: 25%;\">\n<ul>\n<li>mp3<\/li>\n<li>midi<\/li>\n<li>MID<\/li>\n<li>m4a<\/li>\n<\/ul>\n<\/td>\n<td style=\"width: 25%;\">\n<ul>\n<li>mov<\/li>\n<li>avi<\/li>\n<li>wmv<\/li>\n<li>mp4<\/li>\n<\/ul>\n<\/td>\n<td style=\"width: 25%;\">\n<ul>\n<li>pdf<\/li>\n<li>epub<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<div class=\"textbox\"><strong>NOTE: <\/strong>We discourage users from uploading video directly to their Pressbooks media library in most cases because it&#8217;s difficult to provide universal playback support for most videos across all browsers and because video files are often larger than your maximum file upload size. Embedding from a dedicated video streaming service (like YouTube, Vimeo, or Kaltura) is almost always a better choice for including video in your book.<\/div>\n<h1><a id=\"howtoembedcontent\" href=\"\"><\/a>Embed Content via oEmbed<\/h1>\n<p>You can automatically embed media from <a href=\"https:\/\/wordpress.org\/support\/article\/embeds\/#okay-so-what-sites-can-i-embed-from\">a variety of providers<\/a> (like YouTube, Twitter, Vimeo, TED, Flickr, Reddit, TikTok, Spotify, and more) which support the oEmbed specification. <span style=\"text-align: initial; font-size: 1em;\">To embed content from a supported oembed provider:<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400;\">Copy the URL of the video, audio, or other media (i.e. <code>https:\/\/www.youtube.com\/watch?v=hrcrFJVgbbs<\/code>)<\/li>\n<li style=\"font-weight: 400;\">Paste the URL onto its own line into the <strong>Visual<\/strong> editor<\/li>\n<li style=\"font-weight: 400;\"><span style=\"orphans: 1; text-align: initial; widows: 2; font-size: 1em;\">Click <strong>Save\u00a0<\/strong><\/span><\/li>\n<\/ol>\n<p>The URL you pasted in step two, should be automatically replaced by the embedded content in the visual editor. After you save the chapter or post, the content will display in the webbook and can be seen by readers if the book is made public.<\/p>\n<h1>Embed iframes<\/h1>\n<p>Pressbooks restricts the embedding on iframes from most other sites for security reasons. We will allow iframes to be embedded from the following providers, however:<\/p>\n<ul>\n<li><a href=\"https:\/\/phet.colorado.edu\/\">PhET Interactive Simulations<\/a><\/li>\n<li><a href=\"https:\/\/timeline.knightlab.com\/\">knight lab Timeline<\/a><\/li>\n<li><a href=\"https:\/\/www.brightcove.com\/en\/\">Brightcove<\/a><\/li>\n<li><a href=\"https:\/\/docs.google.com\/forms\/\">Google Forms<\/a><\/li>\n<li><a href=\"https:\/\/www.google.com\/maps\/\">Google Maps<\/a><\/li>\n<\/ul>\n<div class=\"textbox\"><strong>Note: <\/strong>Network managers can permit the embedding of iframes from any other trusted provider\u00a0via <a href=\"https:\/\/networkmanagerguide.pressbooks.com\/chapter\/network-options\/#chapter-464-section-8\">a network-specific iframe allowlist<\/a>. Contact your network manager with questions about embedding iframes from sources other than those listed above.<\/div>\n<p>&nbsp;<\/p>\n<div>\n<p>To embed an iframe from a source that has been permitted for your network:<\/p>\n<ol>\n<li style=\"font-weight: 400;\">Copy the source object&#8217;s &lt;iframe&gt; embed code (this is usually available in the sharing options of the media on its source website)<\/li>\n<li style=\"font-weight: 400;\">Switch to the <a href=\"https:\/\/pressbooks.pub\/guide\/chapter\/edit-content-with-the-visual-text-editors#texteditortoolbar\">Text editor<\/a> in Pressbooks and <strong>paste the iframe code\u00a0<\/strong>you copied in step 1.<\/li>\n<li style=\"font-weight: 400;\">Click <strong>Save<\/strong><\/li>\n<\/ol>\n<p>If the source comes from a permitted domain, and you have copied in the source object&#8217;s &lt;iframe&gt; embed code, the video should then appear in your visual editor and webbook. If you&#8217;re unable to embed an iframe from a source because it isn&#8217;t allowed for your network, consider simply adding a hyperlink to the resource.<\/p>\n<\/div>\n<div>\n<h1>Use Embed and Media Shortcodes<\/h1>\n<p>Pressbooks supports two <a href=\"https:\/\/pressbooks.pub\/guide\/chapter\/shortcodes\/\">shortcodes<\/a>, <strong>Embed <\/strong>and <strong>Media<\/strong>. The embed shortcode is most useful when you&#8217;re drafting content outside of Pressbooks (in a word processor, for example) but want to import it later. Using the embed shortcode signals to Pressbooks that there&#8217;s an embedded video and not just a regular link in your book. Here&#8217;s a sample embed shortcode: <code><strong>[em\u200bbed<\/strong><strong>]https:\/\/www.youtube.com\/watch?v=hrcrFJVgbbs<\/strong><strong>[\/em\u200bbed]<\/strong><\/code><strong>\u00a0<\/strong><\/p>\n<p>The media shortcode allows you to embed an externally hosted media file (like an image) and includes an optional parameter which will let you define a caption for that embedded media element. Here&#8217;s a sample media shortcode (with caption) for a photograph of the Hagia Sophia which is hosted on Wikimedia: <code style=\"orphans: 1; text-align: initial; widows: 2;\"><strong><\/p>\n<figure class=\"embed\"><a href=\"https:\/\/commons.wikimedia.org\/wiki\/Category:Hagia_Sophia#\/media\/File:Hagia_Sophia_Mars_2013.jpg\">https:\/\/commons.wikimedia.org\/wiki\/Category:Hagia_Sophia#\/media\/File:Hagia_Sophia_Mars_2013.jpg<\/a><figcaption>The Hagia Sophia. This photograph was taken by Arild V\u00e5gen and is licensed under a CC-BY-SA license<\/figcaption><\/figure>\n<p><\/strong><\/code><\/p>\n<h1>Insert H5P Activities<\/h1>\n<p>Many Pressbooks networks designed for educational publishing include an integration with H5P, a powerful open source tool that allows you to insert interactive quizzes and other learning activities directly into your webbook. <a href=\"https:\/\/pressbooks.pub\/guide\/chapter\/create-interactive-content-with-h5p\/\">Learn more about creating H5P activities in your book.<\/a><\/p>\n<div class=\"textbox shaded\"><strong>H5P creation is not available to authors on Pressbooks.com<\/strong>. If you&#8217;re interested in using H5P in your book project, please contact <a href=\"mailto:sales@pressbooks.com\">sales@pressbooks.com<\/a>.<\/div>\n<h1>Embedded Media in Exports<\/h1>\n<p>Not all embedded media can be displayed in ebook and PDF files. Pressbooks attempts to provide a graceful fallback for any embedded content which cannot be displayed with its proper functionality in any of our export formats. This fallback consists of an inserted message that is populated with information available in the system (may include a title, thumbnail, the kind of media, etc.) and provides the reader with a link to the webbook version of the chapter so they can view the missing element (print readers will see a short URL that they can type into a browser).<\/p>\n<\/div>\n","protected":false},"author":1,"menu_order":11,"template":"","meta":{"pb_show_title":"","pb_short_title":"","pb_subtitle":"","pb_authors":[],"pb_section_license":""},"chapter-type":[48],"contributor":[],"license":[],"class_list":["post-74","chapter","type-chapter","status-publish","hentry","chapter-type-standard"],"part":53,"_links":{"self":[{"href":"https:\/\/openbook.ums.edu.my\/userguide\/wp-json\/pressbooks\/v2\/chapters\/74","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/openbook.ums.edu.my\/userguide\/wp-json\/pressbooks\/v2\/chapters"}],"about":[{"href":"https:\/\/openbook.ums.edu.my\/userguide\/wp-json\/wp\/v2\/types\/chapter"}],"author":[{"embeddable":true,"href":"https:\/\/openbook.ums.edu.my\/userguide\/wp-json\/wp\/v2\/users\/1"}],"version-history":[{"count":1,"href":"https:\/\/openbook.ums.edu.my\/userguide\/wp-json\/pressbooks\/v2\/chapters\/74\/revisions"}],"predecessor-version":[{"id":75,"href":"https:\/\/openbook.ums.edu.my\/userguide\/wp-json\/pressbooks\/v2\/chapters\/74\/revisions\/75"}],"part":[{"href":"https:\/\/openbook.ums.edu.my\/userguide\/wp-json\/pressbooks\/v2\/parts\/53"}],"metadata":[{"href":"https:\/\/openbook.ums.edu.my\/userguide\/wp-json\/pressbooks\/v2\/chapters\/74\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/openbook.ums.edu.my\/userguide\/wp-json\/wp\/v2\/media?parent=74"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/openbook.ums.edu.my\/userguide\/wp-json\/pressbooks\/v2\/chapter-type?post=74"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/openbook.ums.edu.my\/userguide\/wp-json\/wp\/v2\/contributor?post=74"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/openbook.ums.edu.my\/userguide\/wp-json\/wp\/v2\/license?post=74"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}