{"id":14824,"date":"2011-11-02T07:45:54","date_gmt":"2011-11-02T14:45:54","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=14824"},"modified":"2015-02-25T20:08:48","modified_gmt":"2015-02-26T03:08:48","slug":"103-integrating-fitvids-js-into-wordpress","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/video-screencasts\/103-integrating-fitvids-js-into-wordpress\/","title":{"rendered":"#103: Integrating FitVids.js into WordPress"},"content":{"rendered":"
The default WordPress theme at the time of this screencast is TwentyEleven, a wonderfully simple and responsive design. That is, until we post an awesome YouTube video as a new blog post and the responsiveness breaks down. The video doesn’t fill the area on wide screens and is too big on narrow screens, breaking outside the content area. <\/p>\n
In this video we’ll cover how to add jQuery to a WordPress theme, then download the jQuery plugin FitVids.js and integrate it into the theme (simple stuff!). The result is the video instantly fits the responsive nature of the theme. It works for video from any source.<\/p>\n
Even though this is a simple and specific example, I hope it helps you understand how you can get started integrating any cool JavaScript thingy you find on the web into a WordPress site.<\/p>\n
Links from the video:<\/strong><\/p>\n The default WordPress theme at the time of this screencast is TwentyEleven, a wonderfully simple and responsive design. That is, until we post an awesome YouTube video as a new blog post and the responsiveness breaks down. The video doesn’t fill the area on wide screens and is too big on narrow screens, breaking outside […]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":1283,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"video-single.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[],"acf":[],"jetpack-related-posts":[{"id":18228,"url":"https:\/\/css-tricks.com\/lodge\/v10\/029-integrating-fitvids-js\/","url_meta":{"origin":14824,"position":0},"title":"#029: Integrating FitVids.js","date":"September 12, 2012","format":false,"excerpt":"Images aren't the only media that need to play nice within our flexible grid. And images were easy compared to video! When you set the width of an and override its height value to auto, the image will naturally retain its aspect ratio. This is also true of , but\u2026","rel":"","context":"With 10 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1283,"url":"https:\/\/css-tricks.com\/video-screencasts\/","url_meta":{"origin":14824,"position":1},"title":"Video Screencasts","date":"November 3, 2008","format":false,"excerpt":"#115: Don't Overthink It Grids Running time: 17:19 Almost every site on the internet needs some kind of grid. Grids don't have to be a big complicated framework. You can create one yourself with just a few lines of CSS. #114: Let\u2019s Do Simple Stuff to Make Our Websites Faster\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":155627,"url":"https:\/\/css-tricks.com\/lodge\/learn-jquery\/27-building-simple-jquery-plugin\/","url_meta":{"origin":14824,"position":2},"title":"#27: Building a Simple jQuery Plugin","date":"November 11, 2013","format":false,"excerpt":"Now that we've looked at using jQuery plugins, it is absolutely worth understanding how to build them as well. We already briefly touched on the fact that you can extend the native jQuery object if you want to. Just like: $.myFunction = function() { console.log(\"I am a function on the\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":147868,"url":"https:\/\/css-tricks.com\/lodge\/learn-jquery\/02-file-setup-linking-up-jquery\/","url_meta":{"origin":14824,"position":3},"title":"#02: File Setup \/ Linking Up jQuery","date":"August 22, 2013","format":false,"excerpt":"In this screencast I cover the absolute bare minimum setup for utilizing jQuery on a \"real\" website. We have an index.html file with the basic HTML5 structure stubbed out. jQuery is included as a I wanted to cover that right away so that you can experience how easy using jQuery\u2026","rel":"","context":"With 1 comment","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":4424,"url":"https:\/\/css-tricks.com\/snippets\/wordpress\/include-jquery-in-wordpress-theme\/","url_meta":{"origin":14824,"position":4},"title":"Include jQuery in WordPress Theme","date":"October 16, 2009","format":false,"excerpt":"The following is the best way to go about it. Add the following to the theme's functions.php file: if (!is_admin()) add_action(\"wp_enqueue_scripts\", \"my_jquery_enqueue\", 11); function my_jquery_enqueue() { wp_deregister_script('jquery'); wp_register_script('jquery', \"http\" . ($_SERVER['SERVER_PORT'] == 443 ? \"s\" : \"\") . \":\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.7.1\/jquery.min.js\", false, null); wp_enqueue_script('jquery'); } Replace the URL with the location of\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":3392,"url":"https:\/\/css-tricks.com\/video-screencasts-3\/","url_meta":{"origin":14824,"position":5},"title":"Video Screencasts","date":"August 12, 2009","format":false,"excerpt":"#40: How z-index Works Running time: 18:37 Z-index can be a little confusing sometimes. In this screencast I attempt to explain how it works, how it's tied to positioning, some quirks, and some general advice. #39: How to Use sIFR 3 Running time: 22:10 sIFR (Scalable Inman Flash Replacement) is\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14824"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=14824"}],"version-history":[{"count":6,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14824\/revisions"}],"predecessor-version":[{"id":154684,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14824\/revisions\/154684"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/1283"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=14824"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=14824"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}\n