ResponsiveYoutube

Youtube embed codes that work on any screensize!

Advanced options +


ABOUT RESPONSIVE YOUTUBE EMBEDS

While each Youtube video has a 'share' button below it, the standard embed codes it provides all have fixed widths and heights. This means they do not resize and adapt to fit the many screen sizes that modern responsive websites have to cater for, in some cases breaking your carefully-constructed layout entirely!

The Youtube embed codes provided above are different: they are fully responsive, stretching to fix the width of the containing element while maintaining the aspect ratio of the original video to avoid ugly black borders on your videos.

The Youtube link

All this Youtube embed generator requires in the URL of the Youtube video you want to embed. Not sure how to get this? Just find the video on Youtube and copy and paste whatever is on the address bar!

ADVANCED OPTIONS

Maximum width

Videos appearing too large? Enter a maximum width here. For example '900px' will make sure your video is responsive between 0 and 900 pixels wide, but not bigger.

Start at

By default your video will start at the beginning, but if you want it to start later than this you can enter the start time here in the format hh:mm:ss. For example, if you want your video to start 1 minute and 30 seconds in, enter '1:30'.

Force aspect ratio

Be default this Youtube embed generator will auto-detect the aspect ratio of the video and resize the embed to match, removing any black bars that would otherwise appear at the top and sides of the video. However, if you want your Youtube embeds to have a fixed aspect ratio (for example 16:9 or 4:3), you can select it here.

Show suggested videos when video finishes

By default, at the end of the video Youtube will show a selection of related video content that viewers may like to watch next. To prevent this from happening, you can change this to 'no'.

Show player controls

Changing this to 'No' will remove the player controls that appear at the bottom of the screen, such as the 'Play', 'Pause' and volume controls. This gives the video embeds a more clean look, but may annoy your users!

Show video title and player actions

Changing this to 'No' will remove the videos title and the 'Watch later' and 'Share' icons that appear at the top of the screen.

Autoplay video

Changing this option to 'Yes' will cause the video to start playing as soon as the page loads. Beware! This may annoy your users!

Play muted

Selecting 'Yes' will mean that the video is initially muted (but your users will still be able to unmute it).