{"id":25393,"date":"2018-02-03T15:17:26","date_gmt":"2018-02-03T05:17:26","guid":{"rendered":"https:\/\/codemyui.com\/?p=25393"},"modified":"2018-02-03T15:17:26","modified_gmt":"2018-02-03T05:17:26","slug":"responsive-iframe-reprocss","status":"publish","type":"post","link":"https:\/\/codemyui.com\/responsive-iframe-reprocss\/","title":{"rendered":"Responsive iframe with reproCSS"},"content":{"rendered":"

Here is a responsive<\/a> iframe snippet that you can use in your next project. It was designed by Tommy Hodgins<\/a> using reproCSS<\/a>.
\n<\/p>\n

If you are having trouble with the pen, try the archived copy on GitHub<\/a><\/p>\n

Responsive iframe Snippet<\/h2>\n

\nSee the Pen Scalable iframe with reproCSS by Tommy Hodgins (@tomhodgins) on CodePen.<\/p>\n\n","protected":false},"excerpt":{"rendered":"

Here is a responsive iframe snippet that you can use in your next project. It was designed by Tommy Hodgins using reproCSS.<\/p>\nRead More<\/a>","protected":false},"author":1,"featured_media":25395,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[1],"tags":[54563337,608602195],"class_list":["post-25393","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-mobile-optimised","tag-reprocss-js","col-sm-6"],"acf":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/02\/responsive-iframe-with-reprocss.gif?fit=880%2C440&ssl=1","jetpack-related-posts":[{"id":17739,"url":"https:\/\/codemyui.com\/flashlight-mouse-pointer\/","url_meta":{"origin":25393,"position":0},"title":"Flashlight Mouse Pointer","author":"Hima Vincent","date":"October 10, 2019","format":false,"excerpt":"In this snippet by Tommy Hodgins we can see the effect where the entire page is behind a fog of war like effect and is barely visible. When you move the mouse around you can see that there is a spotlight like effect, that reveals the content in that area,\u2026","rel":"","context":"In \"hidden content\"","block_context":{"text":"hidden content","link":"https:\/\/codemyui.com\/tag\/hidden-content\/"},"img":{"alt_text":"Flashlight Mouse Pointer","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/10\/Flashlight-Mouse-Pointer.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/10\/Flashlight-Mouse-Pointer.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/10\/Flashlight-Mouse-Pointer.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/10\/Flashlight-Mouse-Pointer.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":28742,"url":"https:\/\/codemyui.com\/update-css-on-regex-validation-for-input-fields\/","url_meta":{"origin":25393,"position":1},"title":"Update CSS on RegEx Validation for input fields","author":"Saijo George","date":"November 2, 2019","format":false,"excerpt":"Here is a simple validation using repoCSS.js that lets you run RegEX validation on input fields and turns the input field background red when it detects a pattern. If you are having trouble with the pen, try the archived copy on GitHub RegEx Validation Snippet","rel":"","context":"In \"input field\"","block_context":{"text":"input field","link":"https:\/\/codemyui.com\/tag\/input-field\/"},"img":{"alt_text":"RegEx Validation for input fields","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/11\/RegEx-Validation-for-input-fields.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/11\/RegEx-Validation-for-input-fields.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/11\/RegEx-Validation-for-input-fields.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/11\/RegEx-Validation-for-input-fields.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":2256,"url":"https:\/\/codemyui.com\/slideout-next-article-modal-reach-end-post\/","url_meta":{"origin":25393,"position":2},"title":"Slideout Next Article Modal When You Reach End of Post","author":"Hima Vincent","date":"September 12, 2016","format":false,"excerpt":"If you are looking to get your visitors to check out the next article on your blog, after they finish reading the one they are on, this snippet might help. When you reach the end of the page, you can slide out a modal with some info about the next\u2026","rel":"","context":"In \"article\"","block_context":{"text":"article","link":"https:\/\/codemyui.com\/tag\/article\/"},"img":{"alt_text":"Slideout Next Article Modal When You Reach End of Post","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/09\/slideout-next-article-modal-when-you-reach-end-of-post.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/09\/slideout-next-article-modal-when-you-reach-end-of-post.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/09\/slideout-next-article-modal-when-you-reach-end-of-post.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/09\/slideout-next-article-modal-when-you-reach-end-of-post.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":29007,"url":"https:\/\/codemyui.com\/banner-ad-with-animated-clippath-slides\/","url_meta":{"origin":25393,"position":3},"title":"Banner Ad with Animated Clippath Slides","author":"Saijo George","date":"November 27, 2019","format":false,"excerpt":"Here are multiple banner ad designs by Codepen user halvves. In here we have 2 variations for 300x250, 728x90, 160x600 and 320x50 ads where you have some nice slide transitions between images and text copy to deliver a powerful message. 300x250 Banner Variation A Snippet If you are having trouble\u2026","rel":"","context":"In \"ad template\"","block_context":{"text":"ad template","link":"https:\/\/codemyui.com\/tag\/ad-template\/"},"img":{"alt_text":"Banner Ad with Animated Clippath Slides","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/11\/Banner-Ad-with-Animated-Clippath-Slides.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/11\/Banner-Ad-with-Animated-Clippath-Slides.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/11\/Banner-Ad-with-Animated-Clippath-Slides.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/11\/Banner-Ad-with-Animated-Clippath-Slides.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":26716,"url":"https:\/\/codemyui.com\/css-only-responsive-timeline-snippet\/","url_meta":{"origin":25393,"position":4},"title":"CSS Only Responsive Timeline Snippet","author":"Saijo George","date":"July 23, 2018","format":false,"excerpt":"This CSS only snippet by Bruno Rodrigues is great when you want to have a timeline on your site and the best part is that this is mobile friendly. Each timeline entry has an icon and a chat bubble like thing for the content. If you are having trouble with\u2026","rel":"","context":"In \"mobile optimised\"","block_context":{"text":"mobile optimised","link":"https:\/\/codemyui.com\/tag\/mobile-optimised\/"},"img":{"alt_text":"CSS Only Responsive Timeline Snippet","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/07\/CSS-Only-Responsive-Timeline-Snippet.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/07\/CSS-Only-Responsive-Timeline-Snippet.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/07\/CSS-Only-Responsive-Timeline-Snippet.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/07\/CSS-Only-Responsive-Timeline-Snippet.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":6161,"url":"https:\/\/codemyui.com\/ken-burns-responsive-banner\/","url_meta":{"origin":25393,"position":5},"title":"Ken Burns Responsive Banner","author":"Hima Vincent","date":"February 26, 2017","format":false,"excerpt":"This snippet for a responsive image banner with the Ken burns effect was designed by designed by Kyle Foster. If you are having trouble with the pen, try the archived copy on GitHub Responsive Banner Snippet","rel":"","context":"In \"article\"","block_context":{"text":"article","link":"https:\/\/codemyui.com\/tag\/article\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/02\/responsivebanner.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/02\/responsivebanner.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/02\/responsivebanner.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/02\/responsivebanner.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/25393","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/comments?post=25393"}],"version-history":[{"count":0,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/25393\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media\/25395"}],"wp:attachment":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media?parent=25393"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/categories?post=25393"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/tags?post=25393"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}