Embedding a YouTube video is easy on your LibPress site!
Instructions: place its URL into the content area. Make sure the URL is on its own line and not hyperlinked (clickable when viewing the post). The URL will turn into a an embed and provide a live preview in the visual editor. Review the coding examples below for help.
Youtube code example:
Check out this cool video:
https://www.youtube.com/watch?v=Kk8oDwV-5hM&t=3105s
That was a cool video.
The Youtube or Vimeo link must be in the form http://youtube.com… or http://vimeo.com… and not youtu.be or some other variant. If you have a shortened YouTube URL (e.g. http://youtu.be…), view the link. The URL should change at the top of your browser to the http://youtube.com version – this is the long version that you want to paste into the Editor.
Also note: videos will not appear if they are placed within a table! (And reminder, just try to avoid tables generally for formatting purposes… see Best Practices).
For a one-time nominal fee, you can embed items from the following list of approved services into a LibPress page:
- Facebook (specific posts or activity that are made public, ie. /activity /photos /videos etc.)
- Instagram (specific posts or activity that are made public, ie. /p /tv etc.)
- Google Docs (documents, sheets, presentations, forms, and drawings)
- Skedda (free booking software used by Bowen Island Public Library: Book a Space
- CanadaHelps Donations It will detect any URL that starts with “https://www.canadahelps.org/en/dn/“followed by a letter indicating the form type, followed by the form ID number.Here’s the Canadahelps support article on how to find this link https://charityhelp.canadahelps.org/en/articles/linking-donation-form-to-own-donate-button/
For third-party services not whitelisted as above, see 5.4. Third-Party Services.
Instructions: place its URL into the content area. Make sure the URL is on its own line and not hyperlinked (clickable when viewing the post). The URL will turn into a an embed and provide a live preview in the visual editor. Review the coding examples below for help.
Facebook code example:
Check out this weird video on Facebook:
https://www.facebook.com/gibsonslibrary/videos/2113018529013389
That was really weird.
Instagram code example:
Check out this neat library program:
https://www.instagram.com/p/Ck86xiBuCA
That is a neat program.
Google docs code example:
Check out these accessibility principles:
https://docs.google.com/document/d/1pzfAzrKHaZVbVTAEvQCQQARz8wKLm0DZ0AOUYaENc70
Those are important principles to know.
CanadaHelps Donation:
Will detect any URL that starts with “https://www.canadahelps.org/en/dn/“followed by a letter indicating the form type, followed by the form ID number.
Support article to find link https://charityhelp.canadahelps.org/en/articles/linking-donation-form-to-own-donate-button/
Advanced Code
Another option is to wrap the URL in the “embed” Shortcode in the Text view of the Edit Page screen (won’t work in the Visual view).
// NOTE: Remove space between ‘[‘ and ’embed’ when you try.
[ embed width="123" height="456"]http://www.youtube.com/watch?v=Kk8oDwV-5hM&t=3105s[/embed]
Note: Applying width and height will work to resize the embed of Youtube videos, but not Google Docs.
If WordPress fails to embed the URL, the post will contain a hyperlink to the URL.