Article
27. October 2015
0 comment
by Stefan Bauer

Responsive video – Enhance SharePoint default player

It seems like the default media player is not the right tool for responsive design scenarios. This player might could be replaced with a custom one, but this custom one might might not integrate perfectly into SharePoint.

Let’s take a look how the behavior of the built-in media player can be improved to meet responsive requirements.

The media player web part

The player is a current state of the art media and video player. It renders an HTML5 video tag and provide a fallback video playback through Microsoft Silverlight.
Thought the embedding of a video on a SharePoint page the player will be automatically set to match the format of the video file.
In general this is good, but in the case of making a video response and scale across different screen resolutions this is a problem. The applied inline style avoids the proper scaling of the player. A behavior you don’t like to have on a responsive design.

Why not make the video responsive?

[Read more]

Article
2. October 2015
0 comment
by Stefan Bauer

Configure yeoman web app generator to use HTTPS instead of HTTP

browsersync.io

As mentioned in the previous blog posts I use Yeoman and the default web app generator to get my branding for on premises and Office 365 done. While in the past I struggled to configure HTTPS I had to use a mixed content hack to add the CSS or Javascript file to Sharepoint. This hack is might not the best approach and only recommended for development environments.
The good news. The web app generator has recently integrated a tool named Browser Sync.io. This allows you to switch easily from HTTP to HTTPS by simply set one additional property. All that needs to be done is add https and set the value to true or false if you like to disable https support.

...
browserSync: {
options: {
notify: false,
background: true,
watchOptions: {
ignored: ''
},
https: true
},
...

The next time your start with grunt serve your browse will open your web application using https instead of http.
What else to know? Well, you might get an exception by your browser that the certificate is not secure. This is because the certificate is self-signed. To avoid this notification add this certificate to your trusted one and you won’t see the message again.

Browsersync.io

Beside the easy SSL/HTTPS configuration this tool has some other nice features. It allows you to sync different browser windows for testing. So when you scroll your internet explorer it automatically scrolls your Chrome, Firefox. This makes it pretty easy to cross browser test your applications. Needless to say that in can be integrated with grunt as well as gulp. Check out this short introduction on their web site.

I also check the angular yeoman generator but this one still use the old web server component.

Sad but true. This makes the previous blog post on How to use CSS and JavaScript files from Yeoman directly in SharePoint obsolete.