Ever watched an embedded Youtube or Vimeo video on a responsive (including mobile) website? Only the left half of the videos show up on the webpage when viewing on a mobile device or if you minimize your browser window.
Watch Video Below for my explanation and also a cool tutorial on how I took a 4:3 ratio video at Youtube (which gives you those black lines on the sides), and added it to MemberPlayer. I also added preloading in HD 720p, using a 4:3 ratio option, and starting at 84 seconds into the video. 🙂 (see the Roller Coaster video below)
By default, Youtube and Vimeo embed code is NOT fluid layout.
Thus, if you place the default Vimeo or Youtube embed/iframe code on a responsive/fluid layout website, you will get a bad viewer experience, especially on a mobile device.
How do you resolve this?
MemberPlayer was built from the ground floor using Responsive and Fluid layout. MemberPlayer includes the ability to play Self Hosted video files in html5 and fluid platform, as well as Youtube and Vimeo Advanced Player options in Fluid Design.
Here are some video demonstrations. Obviously, the video above is using MemberPlayer with a self hosted video url file. It is nicely responsive, and I added a nice shadow border for a cool effect (you can also add a nice shadow border around Youtube and Vimeo).
MemberPlayer – Youtube 4:3 Ratio HD Fluid Layout
The Youtube video above, using MemberPlayer, is now fully responsive. It plays in 4:3 ratio, thus eliminating the black lines that would occur if you played it in Youtube’s default 16:9 ratio. I also added 720p HD preload, and had the video start at 84 seconds so you can only see the roller coaster. Other options I included are no control bar, no title, and no related videos at end of video.
MemberPlayer – Youtube 16:9 Ratio HD Fluid Layout
The Youtube video above, using MemberPlayer, plays in 16:9 widescreen ratio. I also added 720p HD preload. Other options I included are no control bar, no title, and no related videos at end of video.
MemberPlayer Demo – Vimeo HD Fluid
The Vimeo video above, using MemberPlayer, is fully responsive and includes options: no title, no byline, no user portrait, no badge.
MemberPlayer – Responsive Grid Style Youtube
The Grid style is also available in Vimeo, and Self Hosted videos. The demo above include options HD preload in 1080p, no title, no related videos, no control bar.