{"id":15566,"date":"2023-03-24T17:28:12","date_gmt":"2023-03-24T17:28:12","guid":{"rendered":"http:\/\/www.max-sperling.bplaced.net\/?p=15566"},"modified":"2024-02-16T10:44:02","modified_gmt":"2024-02-16T10:44:02","slug":"responsive-iframe-wordpress","status":"publish","type":"post","link":"http:\/\/www.max-sperling.bplaced.net\/?p=15566","title":{"rendered":"Responsive iframe (WordPress)"},"content":{"rendered":"

Use the provided CSS classes from WordPress<\/strong><\/p>\n

Add the following call in the functions.php file of your current theme, if not already part of it.<\/p>\n

\r\n\/\/ Add support for responsive embed blocks.\r\nadd_theme_support( 'responsive-embeds' );\r\n<\/pre>\n
(This adds the ‘wp-embed-responsive’ CSS class to the <body> of your posts.)<\/p>\n
You can use the provided CSS classes with the following syntax in your posts.<\/p>\n
\r\n<figure class="wp-has-aspect-ratio wp-embed-aspect-16-9">\r\n\t<div class="wp-block-embed__wrapper">\r\n\t\t<iframe ...><\/iframe>\r\n\t<\/div>\r\n<\/figure>\r\n<\/pre>\n
Link: \/wp-includes\/blocks\/embed\/style.css<\/a> (on GitHub)<\/p>\n
\n
Alternative: Add your own CSS classes to the current theme<\/strong><\/p>\n
Add the following code at the end of the style.css file with an FTP client or the in-house editor.<\/p>\n
\r\n\/*--------------------------------------------------------------\r\n# - Responsive iframe\r\n--------------------------------------------------------------*\/\r\n\r\n.res-con { \/* responsive-container *\/\r\n\tposition: relative;\r\n\twidth: 100%;\r\n\tpadding-top: 56.25%; \/* 16:9 Aspect Ratio *\/\r\n}\r\n\r\n.res-con.ar-16-9 {\r\n\tpadding-top: 56.25%; \/* 16:9 Aspect Ratio *\/\r\n}\r\n\r\n.res-con.ar-4-3 {\r\n\tpadding-top: 75%; \/* 4:3 Aspect Ratio *\/\r\n}\r\n\r\n.res-con iframe {\r\n\tposition: absolute;\r\n\ttop: 0;\r\n\tleft: 0;\r\n\twidth: 100%;\r\n\theight: 100%;\r\n}\r\n<\/pre>\n
(The default aspect ratio is 16:9, so you don’t have to add ‘ar-16-9’.)<\/p>\n
You can use the added CSS classes with the following syntax in your posts.<\/p>\n
\r\n<div class="res-con ar-16-9">\r\n  <iframe ...><\/iframe>\r\n<\/div>\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"
Use the provided CSS classes from WordPress Add the following call in the functions.php file of your current theme, if<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false},"categories":[55],"tags":[],"_links":{"self":[{"href":"http:\/\/www.max-sperling.bplaced.net\/index.php?rest_route=\/wp\/v2\/posts\/15566"}],"collection":[{"href":"http:\/\/www.max-sperling.bplaced.net\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.max-sperling.bplaced.net\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.max-sperling.bplaced.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.max-sperling.bplaced.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=15566"}],"version-history":[{"count":1,"href":"http:\/\/www.max-sperling.bplaced.net\/index.php?rest_route=\/wp\/v2\/posts\/15566\/revisions"}],"predecessor-version":[{"id":16823,"href":"http:\/\/www.max-sperling.bplaced.net\/index.php?rest_route=\/wp\/v2\/posts\/15566\/revisions\/16823"}],"wp:attachment":[{"href":"http:\/\/www.max-sperling.bplaced.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=15566"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.max-sperling.bplaced.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=15566"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.max-sperling.bplaced.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=15566"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}