#Videodetector This is an ExpressionEngine 3 extension for converting YouTube, Vimeo, and DailyMotion URLs to players in WYGWAM editors and rendered templates.

• ExpressionEngine 3
• WYGWAM

##Installation

In addition to adding this extension to ExpressionEngine, you'll need to download and add the CKEditor videodetector plugin.

###CKEditor Plugin

1. Download the CKEditor Videodetector plugin.
2. Create a ckeditor-plugins directory in /themes/user.
3. Unzip the CKEditor videodetector plugin to /themes/user/ckeditor-plugins/videodetector.

###ExpressionEngine Add-on Download this EE extension to /system/user/addons/ and activate it in the Add-on manager.

1. Navigate to the configuration page for your WYGWAM editor.
2. Under "Customize the Toolbar" add the VideoDetector icon (the play symbol in a circle).
3. Under "Advanced Settings", select the extraPlugins and add videodetector.

Once the VideoDetector has been added to the custom field toolbar configuration, you can add a player to WYGWAM fields by clicking on the VideoDetector icon and providing a YouTube, Vimeo, or DailyMotion URL in the pop-up dialog.

The player is already fluid in the control panel WYGWAM field. If you'd like it to be fluid within its parent container when rendered in your template, add the following CSS to your stylesheet:

.videodetector {
  height: 0;
  overflow: hidden;
  padding-bottom: 56.25%; // For ratio 16:9. 75% if ratio is 4:3
  position: relative;
}

.videodetector embed,
.videodetector object,
.videodetector iframe {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

More information about styling a fluid width media player that fits its parent container: CSS-Tricks: Fluid Width Video.