Archived topic
Embedding responsive video best practice / performance? videos on Wistia
3 replies · Started by Brad on January 31, 2023
Embedding video question. Any suggestions on best responsive coding practices, best performance? My videos will be hosted on Wistia.
Question:
1.
Which do you think would be better for site speed performance? oEmbed or inline code? To make responsive just add css code with class, yes? Or is that not needed now with flexbox?
I'm planning to create a block element - div container - html - add oEmbed or inline code. Position video element via hook more than likely on a page with a priority
________________
Background:
I'm new to this technique: oEmbeds. Create div container, HTML block, paste code (oEmbed or inline) add a class and then responsive css to div.
<div class="videoWrapper">
Your video embed code
</div>
.videoWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}
.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
https://docs.generatepress.com/article/responsive-videos/
________________
I guess you have to first enable the use of oEmbeds from Wistia before it'll work.
Add to functions.php to enable use (prefer not to add another plugin)
<?php
wp_oembed_add_provider( '/https?:\/\/(.+)?(wistia.com|wi.st)\/(medias|embed)\/.*/', 'http://fast.wistia.com/oembed', true);
?>
https://wistia.com/support/integrations/wordpress#the-wistia-wordpress-plugin
______
I just found this though. Should I try this snippet and not use the add provider one above?
add_filter( 'generate_do_block_element_content', function( $content ) {
global $wp_embed;
$content = $wp_embed->autoembed( $content );
return $content;
} );
Sincere thanks for your help.
https://generatepress.com/forums/topic/youtube-video-block-before-navigation/
Hi there,
Wistia provides 2 x methods for displaying their videos.
Either their inline HTML or the oEmbed method.
Either method will have similar performance, which is purely based on what Wistia does and the end users browser.
Inline HTML method requires no setup on Wistia - but it means you paste more code into your site. eg. the <script> and <html>
Whereas oEmbed just requires the URL to the video but it requires you to enable oEmbed in the Wistia preferences.
So if you intend to add lots of videos to your posts, then the latter kinda makes more sense
Responsiveness - either option should behave responsively without any additional code. If thats not the case then let us know.
And this snippet:
add_filter( 'generate_do_block_element_content', function( $content ) {
global $wp_embed;
$content = $wp_embed->autoembed( $content );
return $content;
} );you only need to add that if a. you want to use the oEmbed method, and b. it is inside a GP Block Element.
otherwise it is not required.
Sincere thank you for the detailed reply and explanation. Much appreciated!
You're welcome