{"id":2522,"date":"2013-06-05T16:28:54","date_gmt":"2013-06-05T16:28:54","guid":{"rendered":"http:\/\/weblusive.com\/epic\/?page_id=2522"},"modified":"2013-06-05T16:28:54","modified_gmt":"2013-06-05T16:28:54","slug":"flex-video","status":"publish","type":"page","link":"https:\/\/www.pardosilver.com\/?page_id=2522","title":{"rendered":"Flex-video"},"content":{"rendered":"<div class='content-column one_fourth'>[panel type=\u00bbwidgets\u00bb title=\u00bbSide Navigation\u00bb ][accordiongroup][accordion title=\u00bbAdd-ons\u00bb][sidenav][sideitem link=\u00bbhttp:\/\/weblusive.com\/epic\/styling\/alert-boxes\/\u00bb]Alert Boxes[\/sideitem][sideitem link=\u00bbhttp:\/\/weblusive.com\/epic\/styling\/panels\/\u00bb]Panels[\/sideitem][sideitem link=\u00bbhttp:\/\/weblusive.com\/epic\/styling\/pricing-tables\/\u00bb]Pricing Tables[\/sideitem][sideitem link=\u00bbhttp:\/\/weblusive.com\/epic\/styling\/progress-bars\/\u00bb]Progress bars[\/sideitem][sideitem link=\u00bbhttp:\/\/weblusive.com\/epic\/styling\/tables\/\u00bb]Tables[\/sideitem][sideitem link=\u00bbhttp:\/\/weblusive.com\/epic\/styling\/thumbnails\/\u00bb]Thumbnails[\/sideitem][sideitem link=\u00bbhttp:\/\/weblusive.com\/epic\/styling\/flex-video\/\u00bb]Flex-video[\/sideitem][\/sidenav][\/accordion][\/accordiongroup][\/panel]<br \/><\/div>\n<div class='content-column three_fourth'><h3>Flex Video<\/h3>\n<p>If you&#8217;re embedding a video from YouTube, Vimeo, or another site that uses iframe, embed or object elements, you can wrap your video in <code>div.flex-video<\/code> to create an intrinsic ratio that will properly scale your video on any device.<\/p>\n<p>[row]<br \/>\n<div class='content-column one_half'><\/p>\n<p>4:3 is the default size for the .flex-video element, and the assumption for .flex-video for chrome (controls) height is based on YouTube.<br \/><\/div><br \/>\n<div class='content-column one_half'><\/p>\n<p>Because Vimeo places their chrome on the player itself, adding a class of .vimeo creates a container that is sized for the video only \u2014 no extra padding for the controls.<br \/><\/div><br \/>\n[\/row]<br \/>\n<!-- Flex Videos --><\/p>\n<hr \/>\n<p>Building flex-video containers using our classes is simple, you&#8217;ll just need to create a <code>&lt;div class=\"flex-video\"&gt;<\/code> and apply the classes you want to style it appropriately.<\/p>\n<p>The available class options:<br \/>\n<code>widescreen<\/code>: Will give the player a widescreen aspect ratio.<br \/>\n<code>vimeo<\/code>: This will ensure that we don&#8217;t add extra padding since Vimeo has controls within the player, itself.<br \/><\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":2,"featured_media":0,"parent":2514,"menu_order":0,"comment_status":"open","ping_status":"open","template":"","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"class_list":["post-2522","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.pardosilver.com\/index.php?rest_route=\/wp\/v2\/pages\/2522","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.pardosilver.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.pardosilver.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.pardosilver.com\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.pardosilver.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2522"}],"version-history":[{"count":0,"href":"https:\/\/www.pardosilver.com\/index.php?rest_route=\/wp\/v2\/pages\/2522\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/www.pardosilver.com\/index.php?rest_route=\/wp\/v2\/pages\/2514"}],"wp:attachment":[{"href":"https:\/\/www.pardosilver.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2522"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}