Responsive Video & Media
When you don't assign a feature image, the post header defaults to this style. Videos included into the Triangle theme content are flexible - Even iFrames. That means Youtube, Vimeo, and even things like Google Maps will adjust nicely for any user. Here is a little info on the video we've included here...
Responsive Video
Videos are resized automatically with the UIKit javascript. Just add the class of "uk-responsive-width" and the data-uk-responsive helper to your iframe. All scripts are already included and built in, you just need to adjust the html to fit your needs.
<iframe src="URL" width="1200" height="675" class="uk-responsive-width" data-uk-responsive allowfullscreen></iframe>Of course, if you want to customize your own video post style, you can do that too. Just create a video post style and customize away.
Dynamic Audio
If you want to embed an audio iframe, the same rules apply as video. If you're embedding offsite audio (from SoundCloud for example) its as easy as adding one tag and class. Customize the iframe html and you're all set. All scripts are already included and built in, you just need to style them to fit your needs.
Audio Embed Code
Audio embeds like the one above are resized with a simple javascript that reads the parent container & retains videos dimensions on page load. You don't need to add a helper tag to the iframe in this case. You just make sure the parent div is the width you want and apply the "uk-preserve-width" class to the iframe. Just decide if you want to retain the embeds dimensions and use the appropriate class.
<div class="uk-width-1-1"><iframe src="URL" width="1000" height="450" class="uk-preserve-width"></iframe></div>If you want to customize your own podcast using Ghost, here is a really helpful post on publishing a podcast with Ghost. It explains the entire process really well.
Share This Post
