Comments (6)
It looks like AMP-WP currently only handles VideoPress if it is used in the Iframe mode (which is the default), but it is possible to configure VideoPress to fully embed in the page (ie, no Iframe), which then allows for customizing the styling. This can be done via adding the following to the functions.php
file:
// This forces VideoPress to embed into the page (to allow for styling, etc.), instead of using an Iframe (which is the default).
function my_videopress_use_iframe($vp_iframe){
return false; // True indicates that Iframe will be used; False, that player will be fully embedded into page.
}
add_filter('jetpack_videopress_player_use_iframe', 'my_videopress_use_iframe', 1000);
I use the above (because I want to customize the CSS of the player), and so currently there is no Amp output for my VideoPress videos. I'm not sure what the best route here is--perhaps outputting the same <amp-iframe>
VideoPress content in this situation as well?
Somehow we need to eventually handle this condition though, as one of the advertised features of VideoPress is customizing the CSS (though admittedly it's listed as being a Beta feature currently), and that can only be done via the above method (as far as I know).
Thoughts?
from amp-wp.
Yeah, falling back to amp-iframe
would be the only option here since the AMP spec does not support Flash embeds.
from amp-wp.
Actually I think the newest version of the VideoPress player no longer uses Flash (I believe it's a combination HTML5 Video and JS), though it is possible to force it to use the "legacy" Flash-based player. But it seems like it might be more trouble than it's worth to try to make things work in the fully-embedded-in-page mode (vs Iframe) for AMP pages as it needs to inject it's own videopress.js
in order for the player to work, and that just seems like a nightmare to work with in the AMP context (the more I think about it). So yeah, falling back to the same amp-iframe
content is probably the way to go.
from amp-wp.
Would you mind linking to an example post? I don't have VideoPress readily available on a non-WordPress.com site right now. The non-iframe mode should still work if it's outputting video
tags, just without the customizations.
from amp-wp.
I realize now why it's not working--both the legacy player and the new player (in non-iframe mode) build the player itself via Javascript after page load, so there's very little output prior to that (and thus very little available to the Amp-WP plugin to access). However, I do think that little bit (<div id="v-Gd7RSV6s-1" class="video-player"><div id="v-Gd7RSV6s"></div>
) could be parsed into something useful.
I realize that it isn't much, but the Gd7RSV6s
is the id of the video, which is the most important piece needed in order to construct the correct Iframe string. For example, currently the below is the Iframe embed string for the above (that is generated by the VideoPress Share menu):
<iframe width="560" height="315" src="https://videopress.com/embed/Gd7RSV6s" frameborder="0" allowfullscreen></iframe>
The only problem I see at the moment is that we won't have access (currently) to the width and height. Will amp-iframe
allow for a iframe without defined dimensions, and furthermore I'm not sure whether we'd end up with funky result or not without dimensions anyway (maybe we could do width=100%, height=auto?)?
I don't want to link to my testing site (as it's private), but I have added some code to my live site so that you can toggle between the Legacy player and the New player (configured to fully embed in the page, and not use Iframes).
Legacy Player:
https://transitionsmft.org/blog/733/how-can-couples-prepare-for-future-conflicts/amp/?video_player=1
https://transitionsmft.org/blog/733/how-can-couples-prepare-for-future-conflicts/?video_player=1
New Player:
https://transitionsmft.org/blog/733/how-can-couples-prepare-for-future-conflicts/amp/?video_player=0
https://transitionsmft.org/blog/733/how-can-couples-prepare-for-future-conflicts/?video_player=0
If you view the non-Amp versions of this page the CSS is a bit buggered for the new player (particularly in the Share menu) because I've not updated the public site for that yet.
I should also mention that you may notice some VideoObject
Schema data in the page, but that is not native to VideoPress. I basically built a wrapper for VideoPress which I use with a shortcode to output the correct Schema data for a given video (which also gives me the ability to define a description, which is not currently possible with VideoPress). So, none of that data is going to be available to other users for parsing by Amp-WP, unfortunately.
If we go this route (of building an Iframe string off of the video id, eg, https://videopress.com/embed/Gd7RSV6s
) it might be good to reach out to the VideoPress devs to ask that they ping someone on the Amp-WP team if they ever change the embed string (since we'll be manually constructing it under the above plan, as opposed to just parsing it from what is outputted). Though, it does seem unlikely they'd change something like that anytime soon and without building in a server-side mechanism for handling the old links.
Alternatively (to the above plan), if the VideoPress devs can make it watch for when a page is in "Amp mode" and then actually output more content that would greatly simplify things! It seems all that would be needed is just to output the single Iframe string (not even bother with the videopress.js
as it would be ignored anyway, I believe. That might actually be the best route, now that I think about it. VideoPress can just test for the Amp-WP function (can't remember the name at the moment) that indicates whether the page is an AMP page or not, and then test the result of the function if it exists, and if it's an AMP page just output the VideoPress Iframe tag (regardless of whether the user has set their VideoPress to not use Iframes).
:)
from amp-wp.
Don't know why I didn't think of this before... This is the simplest solution for now (perhaps this can be documented somewhere for the sake of VideoPress users who are not using the default mode of Iframes?). In functions.php
add the following:
function my_videopress_use_iframe($vp_iframe){
// True indicates that Iframe will be used; False, that player will be fully embeded into page (eg, for CSS styling, etc.).
if( function_exists( 'is_amp_endpoint' ) && is_amp_endpoint() ){
return true; // Return Iframe.
}
else{
return false; // Fully embed player into page (ie, no Iframe used).
}
}
add_filter('jetpack_videopress_player_use_iframe', 'my_videopress_use_iframe', 1000);
This checks if the Amp-WP plugin is active, and if so checks whether we are on an AMP page or not. And if we are, then the above tells VideoPress to output an Iframe (which can then be properly parsed by the Amp-WP plugin). Otherwise, forego the Iframe and fully embed the VideoPress player in the page (so that it can be styled, etc.).
from amp-wp.
Related Issues (20)
- Update node to 16 or 18 HOT 2
- Update spec to include fetchpriority support HOT 8
- PHP deprecated warnings HOT 3
- Remove Gfycat HOT 1
- Call to `_admin_bar_bump_cb` causes deprecation error in WordPress 6.4+ HOT 3
- Omit page caching and object caching tests for Site Health if on WP>=6.1 HOT 7
- Update `AMP_Core_Block_Handler` to handle interactivity API enabled blocks HOT 1
- Lightbox images ("Expand on click") in WordPress 6.4 is broken on AMP pages HOT 1
- Search block with "button only" configuration is broken
- The attribute 'fetchpriority' may not appear in tag 'img' HOT 3
- Feature: Adding contributors section to the README.md file. HOT 3
- Breaks image and media blocks with Gutenberg 17.3.0 and 17.4.0 HOT 3
- Update node to v20 HOT 1
- Featured image not getting shown on WhatsApp. HOT 1
- Provide means to add CSP `nonce` attributes to AMP component script tags HOT 4
- Update PHP-CSS-Parser to v8.5.0 HOT 2
- Gutenberg's validation issues with Script Modules HOT 3
- Need a wordpress hook to change the form submit-success and submit-error element templates html content before rendered. HOT 4
- AMP error: Call to a member function hasAttribute() on null (0) [Error] HOT 2
- Script output for preview is not being marked as dev mode creating validation error HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from amp-wp.