![]() This free online tool exists because most social media sites offer up embed codes that have fixed widths (or extra crap), meaning that the video or gif would be the same size whether you watched it on a 22″ monitor or on a small cellphone. When you place the social media URL into the tool, it spits out a responsive embed codes for embedding rich third-party media (YouTube, Vimeo, Dailymotion, Google Maps, Instagram, Vine) into responsive web pages. The app allows you to create your own embed code from any of the big social media sites when you want that media to resize across all devices. One such tool allows I use when embedding a video, image, or gif is Embed Responsively. The easiest thing to do is keep your videos in SEPARATE content blocks to any other text or images on the page, which also means that you can easily shuffle your content blocks within your lesson page too.As the owner of multiple websites, I often rely on free web tools to accomplish certain tasks (quick photo editing, plugins, widgets, etc). Top Tip: Try to avoid adding any extra text / images / whatever within the content blocks that contain your videos in the text areas – it gets increasingly difficult to switch between the default text view and the code view and it can be rather frustrating! Now, if we go back to your course preview in the browser and refresh the page, you’ll see that you now have a full-width Vimeo video in your lesson – hurrah! ![]() Within the code view, delete any characters showing (we want this text area empty now) and paste in your Vimeo embed code. You’ll also notice some angle brackets in the top right corner of the text area to indicate you’re now in code view. In the text area, type a few spaces or characters, then highlight them and bring up an additional options menu.įrom this menu, click the ‘More Rich’ icon (a plus sign) and then the ‘Code View’ icon (angle brackets) to switch the text area to code view. ![]() But first, we need to switch to code view. Instead of adding your Vimeo embed code into the top section labelled ‘Content Embed Code’, we’ll be adding it to the text content box beneath it. How to make Vimeo videos full-with in Teachery (with no code!) You’ll notice that either side of your video there is spacing – and if you are a little bit of a perfectionist like myself, something like this is going to bug the absolute hell out of you…but fear not! I have a simple no-code fix to solve the problem below. Hit preview course in the left panel of the Teachery admin area, and navigate to that lesson you’ve just edited so you can preview how the embedded video from Vimeo appears. Within your Teachery lesson page (in the admin area) add a course content block, and pop this code into the top section of the content block that’s labelled ‘Content Embed Code’ – because obvs this one makes the most sense, right? Hit the ‘Save’ button to confirm the changes. Grab the video embed code! Head to your Vimeo account, find the video you want to add to Teachery, click the ‘Embed’ button in the top right corner and then copy the responsive code. ![]() Demo of embedding a Vimeo video in Teacheryįor demonstration purposes, let’s look at how an embedded Vimeo video looks by default when you pop it into Teachery. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |