BranchesTags

Repository files navigation

7wp Flex Embed

Transforms your static embeds into shiny responsive ones.

This plugin applies dynamically the suitcss/components-flex-embed methodology to all your embeds (even <iframe> pasted manually into Text tab).
Instead of applying a simple iframe { max-width: 100%; } in your CSS and having black borders to the top and bottom of your YouTube videos, this plugin keeps the right intrinsic ratio of the embeds.

Comparison of renders on iPhone 7 with a 375px width:

Default behaviour`iframe { max-width: 100%; }`7wp Flex Embed
❌✔️✔️✔️✔️
Iframe is cropped or overflowed on the rightIframe is well displayed but only its width is reducedIframe is perfectly displayed

Because the Embed part of WordPress is so interesting, the plugin doesn't stop there. It:

  • turns off autoembed behaviour to have just [embed] shotcodes (but you are able to reverse this choice);
  • sets the width of oEmbed requests according to your $content_width;
  • keeps a raw copy of the oEmbed endpoint response into a post meta _oembed_data_{cache_key};
  • loads wp_embed.js script only when needed and not every time (perf matter);
  • supports [soundcloud] and [slideshare] shortcodes introduced by WordPress.com;
  • adds support to insert beautiful GIFs from Giphy (not in Gutenberg yet);
  • allows to reduce the embed service list (applied to Gutenberg Embed Blocks as well).

Usage

Gutenberg

If you already use Gutenberg (not my case), you may turn on autoembed behaviour with this code add_filter( 'swp_fe_remove_autoembed', '__return_false' ). It's a bit weird but Gutenberg uses this way to render [embed] shortcodes in front-end. It's a bad news.

Select your needed embed services

By default, WordPress supports 34 embed services and Gutenberg offers the same number of Embed Blocks. IMHO, especially for Gutenberg, it's too much and most customers don't know half of them.
This plugin chooses to reduce this long list to the five most common ones: Twitter, Facebook, YouTube, Dailymotion and Vimeo.
But you are able to select your own:

functionmy_theme_select_allowed_embed_providers( $allowed_providers ) {
returnarray( 'Instagram', 'SoundCloud', 'WordPress.tv' ); }
add_filter( 'swp_fe_allowed_providers', 'my_theme_select_allowed_embed_providers' );

You can find the complete list there: https://codex.wordpress.org/Embeds

Deliver an inline version of the plugin assets

add_filter( 'swp_fe_enqueue_style', '__return_false' );
add_action( 'wp_head', function() { echoswp_fe_get_inline_style(); } );

Installation

  1. Manually download the plugin and upload the extracted folder to the plugins directory (e.g.: /wp-content/plugins/)
  2. Activate the plugin through the 'Plugins' menu in WordPress
  3. Enjoy

Attached issues

Changelog

1.0.0 (August 9, 2018)

  • Initial Release.

About

Makes WordPress Embeds responsive and other things

Topics

embedoembedwordpresswordpress-plugin

Resources

Readme
Activity

Stars

2 stars

Watchers

1 watching

Forks

0 forks
Report repository

Releases

Packages

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all 
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

Skip to content
BranchesTags
Repository files navigation
7wp Flex Embed
Transforms your static embeds into shiny responsive ones.
This plugin applies dynamically the suitcss/components-flex-embed methodology to all your embeds (even <iframe> pasted manually into Text tab).

Instead of applying a simple iframe { max-width: 100%; } in your CSS and having black borders to the top and bottom of your YouTube videos, this plugin keeps the right intrinsic ratio of the embeds.
Comparison of renders on iPhone 7 with a 375px width:
Default behaviour`iframe { max-width: 100%; }`7wp Flex Embed
❌✔️✔️✔️✔️
Iframe is cropped or overflowed on the rightIframe is well displayed but only its width is reducedIframe is perfectly displayed
Because the Embed part of WordPress is so interesting, the plugin doesn't stop there. It:
  • turns off autoembed behaviour to have just [embed] shotcodes (but you are able to reverse this choice);
  • sets the width of oEmbed requests according to your $content_width;
  • keeps a raw copy of the oEmbed endpoint response into a post meta _oembed_data_{cache_key};
  • loads wp_embed.js script only when needed and not every time (perf matter);
  • supports [soundcloud] and [slideshare] shortcodes introduced by WordPress.com;
  • adds support to insert beautiful GIFs from Giphy (not in Gutenberg yet);
  • allows to reduce the embed service list (applied to Gutenberg Embed Blocks as well).
Usage
Gutenberg
If you already use Gutenberg (not my case), you may turn on autoembed behaviour with this code add_filter( 'swp_fe_remove_autoembed', '__return_false' ).
It's a bit weird but Gutenberg uses this way to render [embed] shortcodes in front-end. It's a bad news.
Select your needed embed services
By default, WordPress supports 34 embed services and Gutenberg offers the same number of Embed Blocks. IMHO, especially for Gutenberg,
it's too much and most customers don't know half of them.

This plugin chooses to reduce this long list to the five most common ones: Twitter, Facebook, YouTube, Dailymotion and Vimeo.

But you are able to select your own:
functionmy_theme_select_allowed_embed_providers( $allowed_providers ) {
returnarray( 'Instagram', 'SoundCloud', 'WordPress.tv' ); }
add_filter( 'swp_fe_allowed_providers', 'my_theme_select_allowed_embed_providers' );
You can find the complete list there: https://codex.wordpress.org/Embeds
Deliver an inline version of the plugin assets
add_filter( 'swp_fe_enqueue_style', '__return_false' );
add_action( 'wp_head', function() { echoswp_fe_get_inline_style(); } );
Installation
  1. Manually download the plugin and upload the extracted folder to the plugins directory (e.g.: /wp-content/plugins/)
  2. Activate the plugin through the 'Plugins' menu in WordPress
  3. Enjoy
Attached issues
Changelog
1.0.0 (August 9, 2018)
  • Initial Release.
About
Makes WordPress Embeds responsive and other things
Topics
embedoembedwordpresswordpress-plugin
Resources
Readme
Activity
Stars
2 stars
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix");
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
7wp Flex Embed
Transforms your static embeds into shiny responsive ones.
This plugin applies dynamically the suitcss/components-flex-embed methodology to all your embeds (even <iframe> pasted manually into Text tab).

Instead of applying a simple iframe { max-width: 100%; } in your CSS and having black borders to the top and bottom of your YouTube videos, this plugin keeps the right intrinsic ratio of the embeds.
Comparison of renders on iPhone 7 with a 375px width:
Default behaviour`iframe { max-width: 100%; }`7wp Flex Embed
❌✔️✔️✔️✔️
Iframe is cropped or overflowed on the rightIframe is well displayed but only its width is reducedIframe is perfectly displayed
Because the Embed part of WordPress is so interesting, the plugin doesn't stop there. It:
  • turns off autoembed behaviour to have just [embed] shotcodes (but you are able to reverse this choice);
  • sets the width of oEmbed requests according to your $content_width;
  • keeps a raw copy of the oEmbed endpoint response into a post meta _oembed_data_{cache_key};
  • loads wp_embed.js script only when needed and not every time (perf matter);
  • supports [soundcloud] and [slideshare] shortcodes introduced by WordPress.com;
  • adds support to insert beautiful GIFs from Giphy (not in Gutenberg yet);
  • allows to reduce the embed service list (applied to Gutenberg Embed Blocks as well).
Usage
Gutenberg
If you already use Gutenberg (not my case), you may turn on autoembed behaviour with this code add_filter( 'swp_fe_remove_autoembed', '__return_false' ).
It's a bit weird but Gutenberg uses this way to render [embed] shortcodes in front-end. It's a bad news.
Select your needed embed services
By default, WordPress supports 34 embed services and Gutenberg offers the same number of Embed Blocks. IMHO, especially for Gutenberg,
it's too much and most customers don't know half of them.

This plugin chooses to reduce this long list to the five most common ones: Twitter, Facebook, YouTube, Dailymotion and Vimeo.

But you are able to select your own:
functionmy_theme_select_allowed_embed_providers( $allowed_providers ) {
returnarray( 'Instagram', 'SoundCloud', 'WordPress.tv' ); }
add_filter( 'swp_fe_allowed_providers', 'my_theme_select_allowed_embed_providers' );
You can find the complete list there: https://codex.wordpress.org/Embeds
Deliver an inline version of the plugin assets
add_filter( 'swp_fe_enqueue_style', '__return_false' );
add_action( 'wp_head', function() { echoswp_fe_get_inline_style(); } );
Installation
  1. Manually download the plugin and upload the extracted folder to the plugins directory (e.g.: /wp-content/plugins/)
  2. Activate the plugin through the 'Plugins' menu in WordPress
  3. Enjoy
Attached issues
Changelog
1.0.0 (August 9, 2018)
  • Initial Release.
About
Makes WordPress Embeds responsive and other things
Topics
embedoembedwordpresswordpress-plugin
Resources
Readme
Activity
Stars
2 stars
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms");
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
7wp Flex Embed
Transforms your static embeds into shiny responsive ones.
This plugin applies dynamically the suitcss/components-flex-embed methodology to all your embeds (even <iframe> pasted manually into Text tab).

Instead of applying a simple iframe { max-width: 100%; } in your CSS and having black borders to the top and bottom of your YouTube videos, this plugin keeps the right intrinsic ratio of the embeds.
Comparison of renders on iPhone 7 with a 375px width:
Default behaviour`iframe { max-width: 100%; }`7wp Flex Embed
❌✔️✔️✔️✔️
Iframe is cropped or overflowed on the rightIframe is well displayed but only its width is reducedIframe is perfectly displayed
Because the Embed part of WordPress is so interesting, the plugin doesn't stop there. It:
  • turns off autoembed behaviour to have just [embed] shotcodes (but you are able to reverse this choice);
  • sets the width of oEmbed requests according to your $content_width;
  • keeps a raw copy of the oEmbed endpoint response into a post meta _oembed_data_{cache_key};
  • loads wp_embed.js script only when needed and not every time (perf matter);
  • supports [soundcloud] and [slideshare] shortcodes introduced by WordPress.com;
  • adds support to insert beautiful GIFs from Giphy (not in Gutenberg yet);
  • allows to reduce the embed service list (applied to Gutenberg Embed Blocks as well).
Usage
Gutenberg
If you already use Gutenberg (not my case), you may turn on autoembed behaviour with this code add_filter( 'swp_fe_remove_autoembed', '__return_false' ).
It's a bit weird but Gutenberg uses this way to render [embed] shortcodes in front-end. It's a bad news.
Select your needed embed services
By default, WordPress supports 34 embed services and Gutenberg offers the same number of Embed Blocks. IMHO, especially for Gutenberg,
it's too much and most customers don't know half of them.

This plugin chooses to reduce this long list to the five most common ones: Twitter, Facebook, YouTube, Dailymotion and Vimeo.

But you are able to select your own:
functionmy_theme_select_allowed_embed_providers( $allowed_providers ) {
returnarray( 'Instagram', 'SoundCloud', 'WordPress.tv' ); }
add_filter( 'swp_fe_allowed_providers', 'my_theme_select_allowed_embed_providers' );
You can find the complete list there: https://codex.wordpress.org/Embeds
Deliver an inline version of the plugin assets
add_filter( 'swp_fe_enqueue_style', '__return_false' );
add_action( 'wp_head', function() { echoswp_fe_get_inline_style(); } );
Installation
  1. Manually download the plugin and upload the extracted folder to the plugins directory (e.g.: /wp-content/plugins/)
  2. Activate the plugin through the 'Plugins' menu in WordPress
  3. Enjoy
Attached issues
Changelog
1.0.0 (August 9, 2018)
  • Initial Release.
About
Makes WordPress Embeds responsive and other things
Topics
embedoembedwordpresswordpress-plugin
Resources
Readme
Activity
Stars
2 stars
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links");
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

Skip to content
BranchesTags
Repository files navigation
7wp Flex Embed
Transforms your static embeds into shiny responsive ones.
This plugin applies dynamically the suitcss/components-flex-embed methodology to all your embeds (even <iframe> pasted manually into Text tab).

Instead of applying a simple iframe { max-width: 100%; } in your CSS and having black borders to the top and bottom of your YouTube videos, this plugin keeps the right intrinsic ratio of the embeds.
Comparison of renders on iPhone 7 with a 375px width:
Default behaviour`iframe { max-width: 100%; }`7wp Flex Embed
❌✔️✔️✔️✔️
Iframe is cropped or overflowed on the rightIframe is well displayed but only its width is reducedIframe is perfectly displayed
Because the Embed part of WordPress is so interesting, the plugin doesn't stop there. It:
  • turns off autoembed behaviour to have just [embed] shotcodes (but you are able to reverse this choice);
  • sets the width of oEmbed requests according to your $content_width;
  • keeps a raw copy of the oEmbed endpoint response into a post meta _oembed_data_{cache_key};
  • loads wp_embed.js script only when needed and not every time (perf matter);
  • supports [soundcloud] and [slideshare] shortcodes introduced by WordPress.com;
  • adds support to insert beautiful GIFs from Giphy (not in Gutenberg yet);
  • allows to reduce the embed service list (applied to Gutenberg Embed Blocks as well).
Usage
Gutenberg
If you already use Gutenberg (not my case), you may turn on autoembed behaviour with this code add_filter( 'swp_fe_remove_autoembed', '__return_false' ).
It's a bit weird but Gutenberg uses this way to render [embed] shortcodes in front-end. It's a bad news.
Select your needed embed services
By default, WordPress supports 34 embed services and Gutenberg offers the same number of Embed Blocks. IMHO, especially for Gutenberg,
it's too much and most customers don't know half of them.

This plugin chooses to reduce this long list to the five most common ones: Twitter, Facebook, YouTube, Dailymotion and Vimeo.

But you are able to select your own:
functionmy_theme_select_allowed_embed_providers( $allowed_providers ) {
returnarray( 'Instagram', 'SoundCloud', 'WordPress.tv' ); }
add_filter( 'swp_fe_allowed_providers', 'my_theme_select_allowed_embed_providers' );
You can find the complete list there: https://codex.wordpress.org/Embeds
Deliver an inline version of the plugin assets
add_filter( 'swp_fe_enqueue_style', '__return_false' );
add_action( 'wp_head', function() { echoswp_fe_get_inline_style(); } );
Installation
  1. Manually download the plugin and upload the extracted folder to the plugins directory (e.g.: /wp-content/plugins/)
  2. Activate the plugin through the 'Plugins' menu in WordPress
  3. Enjoy
Attached issues
Changelog
1.0.0 (August 9, 2018)
  • Initial Release.
About
Makes WordPress Embeds responsive and other things
Topics
embedoembedwordpresswordpress-plugin
Resources
Readme
Activity
Stars
2 stars
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default");
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
7wp Flex Embed
Transforms your static embeds into shiny responsive ones.
This plugin applies dynamically the suitcss/components-flex-embed methodology to all your embeds (even <iframe> pasted manually into Text tab).

Instead of applying a simple iframe { max-width: 100%; } in your CSS and having black borders to the top and bottom of your YouTube videos, this plugin keeps the right intrinsic ratio of the embeds.
Comparison of renders on iPhone 7 with a 375px width:
Default behaviour`iframe { max-width: 100%; }`7wp Flex Embed
❌✔️✔️✔️✔️
Iframe is cropped or overflowed on the rightIframe is well displayed but only its width is reducedIframe is perfectly displayed
Because the Embed part of WordPress is so interesting, the plugin doesn't stop there. It:
  • turns off autoembed behaviour to have just [embed] shotcodes (but you are able to reverse this choice);
  • sets the width of oEmbed requests according to your $content_width;
  • keeps a raw copy of the oEmbed endpoint response into a post meta _oembed_data_{cache_key};
  • loads wp_embed.js script only when needed and not every time (perf matter);
  • supports [soundcloud] and [slideshare] shortcodes introduced by WordPress.com;
  • adds support to insert beautiful GIFs from Giphy (not in Gutenberg yet);
  • allows to reduce the embed service list (applied to Gutenberg Embed Blocks as well).
Usage
Gutenberg
If you already use Gutenberg (not my case), you may turn on autoembed behaviour with this code add_filter( 'swp_fe_remove_autoembed', '__return_false' ).
It's a bit weird but Gutenberg uses this way to render [embed] shortcodes in front-end. It's a bad news.
Select your needed embed services
By default, WordPress supports 34 embed services and Gutenberg offers the same number of Embed Blocks. IMHO, especially for Gutenberg,
it's too much and most customers don't know half of them.

This plugin chooses to reduce this long list to the five most common ones: Twitter, Facebook, YouTube, Dailymotion and Vimeo.

But you are able to select your own:
functionmy_theme_select_allowed_embed_providers( $allowed_providers ) {
returnarray( 'Instagram', 'SoundCloud', 'WordPress.tv' ); }
add_filter( 'swp_fe_allowed_providers', 'my_theme_select_allowed_embed_providers' );
You can find the complete list there: https://codex.wordpress.org/Embeds
Deliver an inline version of the plugin assets
add_filter( 'swp_fe_enqueue_style', '__return_false' );
add_action( 'wp_head', function() { echoswp_fe_get_inline_style(); } );
Installation
  1. Manually download the plugin and upload the extracted folder to the plugins directory (e.g.: /wp-content/plugins/)
  2. Activate the plugin through the 'Plugins' menu in WordPress
  3. Enjoy
Attached issues
Changelog
1.0.0 (August 9, 2018)
  • Initial Release.
About
Makes WordPress Embeds responsive and other things
Topics
embedoembedwordpresswordpress-plugin
Resources
Readme
Activity
Stars
2 stars
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers");
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
7wp Flex Embed
Transforms your static embeds into shiny responsive ones.
This plugin applies dynamically the suitcss/components-flex-embed methodology to all your embeds (even <iframe> pasted manually into Text tab).

Instead of applying a simple iframe { max-width: 100%; } in your CSS and having black borders to the top and bottom of your YouTube videos, this plugin keeps the right intrinsic ratio of the embeds.
Comparison of renders on iPhone 7 with a 375px width:
Default behaviour`iframe { max-width: 100%; }`7wp Flex Embed
❌✔️✔️✔️✔️
Iframe is cropped or overflowed on the rightIframe is well displayed but only its width is reducedIframe is perfectly displayed
Because the Embed part of WordPress is so interesting, the plugin doesn't stop there. It:
  • turns off autoembed behaviour to have just [embed] shotcodes (but you are able to reverse this choice);
  • sets the width of oEmbed requests according to your $content_width;
  • keeps a raw copy of the oEmbed endpoint response into a post meta _oembed_data_{cache_key};
  • loads wp_embed.js script only when needed and not every time (perf matter);
  • supports [soundcloud] and [slideshare] shortcodes introduced by WordPress.com;
  • adds support to insert beautiful GIFs from Giphy (not in Gutenberg yet);
  • allows to reduce the embed service list (applied to Gutenberg Embed Blocks as well).
Usage
Gutenberg
If you already use Gutenberg (not my case), you may turn on autoembed behaviour with this code add_filter( 'swp_fe_remove_autoembed', '__return_false' ).
It's a bit weird but Gutenberg uses this way to render [embed] shortcodes in front-end. It's a bad news.
Select your needed embed services
By default, WordPress supports 34 embed services and Gutenberg offers the same number of Embed Blocks. IMHO, especially for Gutenberg,
it's too much and most customers don't know half of them.

This plugin chooses to reduce this long list to the five most common ones: Twitter, Facebook, YouTube, Dailymotion and Vimeo.

But you are able to select your own:
functionmy_theme_select_allowed_embed_providers( $allowed_providers ) {
returnarray( 'Instagram', 'SoundCloud', 'WordPress.tv' ); }
add_filter( 'swp_fe_allowed_providers', 'my_theme_select_allowed_embed_providers' );
You can find the complete list there: https://codex.wordpress.org/Embeds
Deliver an inline version of the plugin assets
add_filter( 'swp_fe_enqueue_style', '__return_false' );
add_action( 'wp_head', function() { echoswp_fe_get_inline_style(); } );
Installation
  1. Manually download the plugin and upload the extracted folder to the plugins directory (e.g.: /wp-content/plugins/)
  2. Activate the plugin through the 'Plugins' menu in WordPress
  3. Enjoy
Attached issues
Changelog
1.0.0 (August 9, 2018)
  • Initial Release.
About
Makes WordPress Embeds responsive and other things
Topics
embedoembedwordpresswordpress-plugin
Resources
Readme
Activity
Stars
2 stars
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode");
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();

Skip to content
BranchesTags
Repository files navigation
7wp Flex Embed
Transforms your static embeds into shiny responsive ones.
This plugin applies dynamically the suitcss/components-flex-embed methodology to all your embeds (even <iframe> pasted manually into Text tab).

Instead of applying a simple iframe { max-width: 100%; } in your CSS and having black borders to the top and bottom of your YouTube videos, this plugin keeps the right intrinsic ratio of the embeds.
Comparison of renders on iPhone 7 with a 375px width:
Default behaviour`iframe { max-width: 100%; }`7wp Flex Embed
❌✔️✔️✔️✔️
Iframe is cropped or overflowed on the rightIframe is well displayed but only its width is reducedIframe is perfectly displayed
Because the Embed part of WordPress is so interesting, the plugin doesn't stop there. It:
  • turns off autoembed behaviour to have just [embed] shotcodes (but you are able to reverse this choice);
  • sets the width of oEmbed requests according to your $content_width;
  • keeps a raw copy of the oEmbed endpoint response into a post meta _oembed_data_{cache_key};
  • loads wp_embed.js script only when needed and not every time (perf matter);
  • supports [soundcloud] and [slideshare] shortcodes introduced by WordPress.com;
  • adds support to insert beautiful GIFs from Giphy (not in Gutenberg yet);
  • allows to reduce the embed service list (applied to Gutenberg Embed Blocks as well).
Usage
Gutenberg
If you already use Gutenberg (not my case), you may turn on autoembed behaviour with this code add_filter( 'swp_fe_remove_autoembed', '__return_false' ).
It's a bit weird but Gutenberg uses this way to render [embed] shortcodes in front-end. It's a bad news.
Select your needed embed services
By default, WordPress supports 34 embed services and Gutenberg offers the same number of Embed Blocks. IMHO, especially for Gutenberg,
it's too much and most customers don't know half of them.

This plugin chooses to reduce this long list to the five most common ones: Twitter, Facebook, YouTube, Dailymotion and Vimeo.

But you are able to select your own:
functionmy_theme_select_allowed_embed_providers( $allowed_providers ) {
returnarray( 'Instagram', 'SoundCloud', 'WordPress.tv' ); }
add_filter( 'swp_fe_allowed_providers', 'my_theme_select_allowed_embed_providers' );
You can find the complete list there: https://codex.wordpress.org/Embeds
Deliver an inline version of the plugin assets
add_filter( 'swp_fe_enqueue_style', '__return_false' );
add_action( 'wp_head', function() { echoswp_fe_get_inline_style(); } );
Installation
  1. Manually download the plugin and upload the extracted folder to the plugins directory (e.g.: /wp-content/plugins/)
  2. Activate the plugin through the 'Plugins' menu in WordPress
  3. Enjoy
Attached issues
Changelog
1.0.0 (August 9, 2018)
  • Initial Release.
About
Makes WordPress Embeds responsive and other things
Topics
embedoembedwordpresswordpress-plugin
Resources
Readme
Activity
Stars
2 stars
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages