Responsive Video oEmbed Bootstrap 3 & WordPress

1

WordPress does support oEmbed so I assumed that I could just paste a link into a post.

I indeed did and it worked however the video overflows into the sidebar and it’s not responsive when I re-size the browser.

I ultimately resorted to this interim solution that actually works - http://bootply.com/61833

However, everytime I need to embed a video into a post I have to go through the whole mission of adding the div’s and styles to the post:

<div class="flex-video widescreen" style="margin: 0 auto;text-align:center;"></div>

This is a real pain since users simply just need to paste the link into the post which is the whole purpose of oEmbed and using WordPress as a user friendly CMS.

Any ideas?

BTW: Now that I have found my way around Roots it’s wonderful, well done & thanks guys for providing this to us as developers!

2

Maybe this could be a good starting point - http://codex.wordpress.org/Embeds

3

hm… maybe i’m missing something but as i see it you have two options:

  1. use [fitvids.js][1] and just set it up to target the desired container
    [1]: http://fitvidsjs.com/
  2. add the suggested styling in your link to the .entry-content-asset container. because roots wraps embedded media to that container by default.
4

FluidVids.js is also worth a mention.

If you’re looking for a non-javascript fallback (it’s not a solution because the ratios will sometimes be off) you should also read through lib/config.php where $content_width is discussed. You can set this according to the maximum width of your content area like so:

if (!isset($content_width)) { $content_width = (roots_display_sidebar()) ? 750 : 1140; }

Where 750 is the width in pixels of the content with a sidebar, 1140 is without a sidebar (I believe these are the BS3 defaults for large devices). You should then limit the .entry-content-asset container to max-width: 100%; to ensure it scales down as you go.

5

Foxaii, I have implemented your suggestion and now the OEmbed Youtibe url fits into the 750 content width and does not overflow into the sidebar anymore, so thanks for that.

However when I resize the browser the video is not responsive. You have made a suggestion with [quote=“Foxaii, post:4, topic:155”]
.entry-content-asset
[/quote]

for this.

The only reference I can find to it is in cleanup.php. Where am I supposed to implement it there?

6

The additional detail I gave was for a fallback, not for a solution. To keep the videos responsive, and in the correct ratios, you should use FitVids, FluidVids or the CSS in the example you posted.

Either way CSS changes should go in app.less (on master, formerly the grunt branch) or in app.css (on the classic branch, formerly the master).

7

Thanks, yes I have noticed it’s for fallback only.

I was actually working between the old branch and the new one on 2 local installations of WordPress and that is what most probably got me lost since I couldn’t find app.css anymore.

Now after you told me of the changes in the new branch I also found this great read for the latest branch - http://roots.io/modifying-bootstrap-in-roots/ - It also shows some tips to remove bloat. I have noticed with one of my other sites with the previous version of Bootstrap and some of the bloat removed I have the fastest WordPress installation I’ve ever had. No need for Cache plugins which I don’t really believe in anyway. WordPress + Bootstrap + NGINX = Speed and awesomeness.

Will let you know if I have any more hassles and thanks for the assistance thus far.

8

I don’t know whether I am missing something somewhere.

Before I implemented the responsive video css I decided to test app.less with a simple modification of the body font just like I did within app.css before just to make sure like so:

/* ==========================================================================

Base
========================================================================== */

body {font-family:Verdana,“Helvetica Neue”,Helvetica,Arial,sans-serif;font-size:13px;line-height:1.538461538461538;color:#333;background-color:#fff}

It makes no difference to my theme’s styling, where am I missing the boat now?

9

Ugh it looks like, with the latest build, one has to implement everything using grunt. Another hurdle to overcome first since I need to figure out first now how to compile it on my local Windows install as well as on my live Linux server.

Maybe I should just revert back to the previous build:-( without grunt.

10

There’s already a thread discussing the transition to Grunt. It shouldn’t be a hurdle on Windows, and you can always use the classic branch (which uses app.css and is linked to in the thread below) if you need to.

http://discourse.roots.io/t/how-is-the-new-roots-styled-i-see-no-app-css/167

11

Just to but in here, I’ve used FitVid very successfully on previous projects that use Roots and Bootstrap.

12

Ahh got the hang of grunt now. Now I know why my changes to app.less didn’t take effect one does need to have grunt installed.

Once I had grunt all setup and ran the grunt command after the changes to app.less all worked well.

I had a quick look at who uses grunt here - http://gruntjs.com/who-uses-grunt

and that surely convinced me that this is the best practice method and I am a firm believer of best practice.

FitVid has also been recommended twice to me here know so I have decided to go with it after I saw the FitVid developer’s credentials on their site.

13

Totally awesome!

My vids are now completely responsive and the problem is solved.

Thanks guys for all your assistance.

14

I have implemented FitVids successfully on my pages and singles and I think I will use it as my standard now, thanks @iagdotme

1 Like
15

Anyone looking to incorporate FitVids.js into Roots with Grunt should check out Ben’s How Roots Uses Grunt screencast. It takes you through every step and what you learn can easily be applied to other plugins.

16

Yep this video is really recommended for the novices and even advanced out there since I remember my battle at first to make it work.