

It’s so simple, nothing you need to do in order to play youtube video.
How to reduce page size for youtube embedded videos how to#
WP Embed & How to change width and size of your Youtube video By default when you paste a youtube URL, WordPress renders video on site automatically. The solution I settled on was CSS and mark-up based. Once you set Width for WP Embed posts, height may be overridden by embeddefaults hook to match best for your site layout. I wanted any embedded Youtube objects to resize, with aspect, when switching from the desktop CSS to something smaller (I use media queries to re-render content for mobile devices). For some odd reason, the width box won’t change values, which could be a bug.

You can also type in a value for the height, and the width value will adjust in the actual embed code. The height value will automatically be calculated and filled. The effect on speed was dramatic, reducing page load time by 4.8 times from 17.38S to 3.6 seconds (see Figure 5). For example, just type in a width and then press the Tab key. Using the JavaScript code below we grab the static image from Youtube and display that instead of the actual video.

I'll show you how to resize or compress videos online. Once the user clicks on the play image overlaid on top of this static image, the actual video is shown.
Our snippet now becomes Step 2 Add a container with a CSS class around the iframe.I hit a similar issue with my site when developing some responsive CSS. To fit size limits or free up some memory space on your phone, you need to make your videos smaller. Step 1 Remove all unnecessary properties, including width and height.
