diff --git a/butterflow-ui/MainWindow.xaml b/butterflow-ui/MainWindow.xaml
index df8c327..c740cc6 100644
--- a/butterflow-ui/MainWindow.xaml
+++ b/butterflow-ui/MainWindow.xaml
@@ -3,6 +3,7 @@
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+        xmlns:gu="https://github.com/JohanLarsson/Gu.Wpf.Media"
         xmlns:loc="clr-namespace:butterflow_ui.Localization"
         xmlns:butterflow_ui="clr-namespace:butterflow_ui"
         mc:Ignorable="d"
@@ -143,8 +144,19 @@
                     <RowDefinition Height="Auto" />
                     <RowDefinition Height="Auto" />
                 </Grid.RowDefinitions>
-                <MediaElement Grid.Row="0" Name="mediaPreview" ScrubbingEnabled="True" LoadedBehavior="Manual" UnloadedBehavior="Stop" Source="{Binding OptionsConfiguration.VideoInput, Mode=TwoWay, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type butterflow_ui:MainWindow}}, UpdateSourceTrigger=PropertyChanged}" MediaOpened="mediaPreview_MediaOpened" MediaEnded="mediaPreview_MediaEnded" />
-                <Slider Grid.Row="1" Value="{Binding ElementName=mediaPreview, Path=Position.Seconds, Mode=OneWay}" Maximum="{Binding ElementName=mediaPreview, Path=NaturalDuration.TimeSpan.Seconds}" />
+                <gu:MediaElementWrapper Grid.Row="0" Name="mediaPreview" Stretch="Uniform" ScrubbingEnabled="True" Source="{Binding OptionsConfiguration.VideoInput, Mode=TwoWay, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type butterflow_ui:MainWindow}}, UpdateSourceTrigger=PropertyChanged}" MediaOpened="mediaPreview_MediaOpened" MediaEnded="mediaPreview_MediaEnded" />
+                <Grid Grid.Row="1">
+                    <Grid.ColumnDefinitions>
+                        <ColumnDefinition Width="Auto" />
+                        <ColumnDefinition Width="*" />
+                        <ColumnDefinition Width="Auto" />
+                    </Grid.ColumnDefinitions>
+                    <Label Grid.Column="0" Content="{Binding ElementName=mediaPreview, Path=Position, Converter={x:Static gu:TimeSpanToStringConverter.Default}}" />
+                    <Slider Grid.Column="1" Name="sliderMedia" 
+                            Value="{Binding ElementName=mediaPreview, Path=Position, Converter={x:Static gu:NullableTimeSpanToSecondsConverter.Default}}" 
+                            Maximum="{Binding Path=Length, ElementName=mediaPreview, Converter={x:Static gu:NullableTimeSpanToSecondsConverter.Default}}" />
+                    <Label Grid.Column="2" Content="{Binding Path=Length, ElementName=mediaPreview, Converter={x:Static gu:TimeSpanToStringConverter.Default}}" />
+                </Grid>
                 <StackPanel Grid.Row="2" Orientation="Horizontal" HorizontalAlignment="Center">
                     <Button Name="bntVideoBackward" BorderThickness="0" Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}" Click="bntVideoBackward_Click">
                         <ContentControl HorizontalAlignment="Center" Template="{StaticResource BackwardIcon}" />
diff --git a/butterflow-ui/MainWindow.xaml.cs b/butterflow-ui/MainWindow.xaml.cs
index dd64c5d..f4d9633 100644
--- a/butterflow-ui/MainWindow.xaml.cs
+++ b/butterflow-ui/MainWindow.xaml.cs
@@ -23,8 +23,7 @@ namespace butterflow_ui
     {
         #region Members
 
-        /// <summary> True if the media element is playing a video, false if not. </summary>
-        private bool isPlaying = false;
+        //
 
         #endregion
 
@@ -59,7 +58,7 @@ namespace butterflow_ui
                 //Hack to get the first frame to display in the media preview element.
                 //This also triggers the MediaOpened event so we can get the metadata from the element.
                 mediaPreview.Play();
-                mediaPreview.Pause();
+                mediaPreview.PausePlayback();
             }
         }
 
@@ -82,18 +81,17 @@ namespace butterflow_ui
         /// <param name="e">      Routed event information. </param>
         private void bntVideoPlay_Click(object sender, RoutedEventArgs e)
         {
-            if (!this.isPlaying && this.mediaPreview.Source.IsFile)
+            if (this.mediaPreview.CanPlay() || this.mediaPreview.CanPause.GetValueOrDefault(false))
             {
-                this.isPlaying = true;
-                this.mediaPreview.Play();
+                this.mediaPreview.TogglePlayPause();
+            }
 
+            if(this.mediaPreview.IsPlaying)
+            {
                 this.PlayPauseButtonIcon.Template = Application.Current.Resources["PauseIcon"] as ControlTemplate;
             }
             else
             {
-                this.isPlaying = false;
-                this.mediaPreview.Pause();
-
                 this.PlayPauseButtonIcon.Template = Application.Current.Resources["PlayIcon"] as ControlTemplate;
             }
         }
@@ -103,7 +101,6 @@ namespace butterflow_ui
         /// <param name="e">      Routed event information. </param>
         private void bntVideoStop_Click(object sender, RoutedEventArgs e)
         {
-            this.isPlaying = false;
             this.PlayPauseButtonIcon.Template = Application.Current.Resources["PlayIcon"] as ControlTemplate;
             this.mediaPreview.Stop();
         }
@@ -113,7 +110,10 @@ namespace butterflow_ui
         /// <param name="e">      Routed event information. </param>
         private void bntVideoForward_Click(object sender, RoutedEventArgs e)
         {
-            this.mediaPreview.Position.Add(TimeSpan.FromSeconds(5));
+            if (this.mediaPreview.CanSkipForward(null))
+            {
+                this.mediaPreview.SkipForward(null);
+            }
         }
 
         /// <summary> Event handler. Called by bntVideoBackward for click events. </summary>
@@ -121,7 +121,10 @@ namespace butterflow_ui
         /// <param name="e">      Routed event information. </param>
         private void bntVideoBackward_Click(object sender, RoutedEventArgs e)
         {
-            this.mediaPreview.Position.Subtract(TimeSpan.FromSeconds(5));
+            if (this.mediaPreview.CanSkipBack(null))
+            {
+                this.mediaPreview.SkipBack(null);
+            }
         }
 
         /// <summary> Event handler. Called by mediaPreview for media opened events. </summary>
@@ -138,7 +141,6 @@ namespace butterflow_ui
         /// <param name="e">      Routed event information. </param>
         private void mediaPreview_MediaEnded(object sender, RoutedEventArgs e)
         {
-            this.isPlaying = false;
             this.PlayPauseButtonIcon.Template = Application.Current.Resources["PlayIcon"] as ControlTemplate;
         }
     }
diff --git a/butterflow-ui/butterflow-ui.csproj b/butterflow-ui/butterflow-ui.csproj
index efb304f..f6bbfa0 100644
--- a/butterflow-ui/butterflow-ui.csproj
+++ b/butterflow-ui/butterflow-ui.csproj
@@ -37,6 +37,9 @@
     <Reference Include="csmic, Version=1.1.4.0, Culture=neutral, processorArchitecture=MSIL">
       <HintPath>packages\csmic.1.1.4\lib\net40\csmic.dll</HintPath>
     </Reference>
+    <Reference Include="Gu.Wpf.Media, Version=0.5.0.2, Culture=neutral, processorArchitecture=MSIL">
+      <HintPath>packages\Gu.Wpf.Media.0.5.0.2\lib\net45\Gu.Wpf.Media.dll</HintPath>
+    </Reference>
     <Reference Include="System" />
     <Reference Include="System.Data" />
     <Reference Include="System.Xml" />
diff --git a/butterflow-ui/packages.config b/butterflow-ui/packages.config
index 111741e..9f4f4ae 100644
--- a/butterflow-ui/packages.config
+++ b/butterflow-ui/packages.config
@@ -1,4 +1,5 @@
 <?xml version="1.0" encoding="utf-8"?>
 <packages>
   <package id="csmic" version="1.1.4" targetFramework="net471" />
+  <package id="Gu.Wpf.Media" version="0.5.0.2" targetFramework="net471" />
 </packages>
\ No newline at end of file