Resposive Video Player

kokoruz · September 29, 2014

The smug mug video does not scales to the size of the window (div wrapper). If the window size changes the video window needs to rescale. This works with youtube, vimeo, videoJS and other video players. I'm sure there must be a way that it works with smug mug but I can't find any documentation.

http://client.exclaim-inc.com/ryerson/sfi-gray/about.html

Please help me by providing the code or pointing me to documentation on how to embed the player to work with responsive websites.

phototristan · September 29, 2014

Hi,

Thanks for writing.

Could you elaborate? When I visit that link, both the YouTube embed and the SmugMug embed appear the same size to me when I resize the web browser.

Best Regards,

kokoruz · September 29, 2014

If you resize the window small enough you will see the layout change. The right column flows below the main content and the video window scales to the size of the width of the wrapper.

Also the youtube link scales to fit the width in the sidebar while the smugmug video is overflowing. I've included 2 links to screen grabs to demonstrate the issue I am trying to resolve.

http://client.exclaim-inc.com/ryerson/sfi-gray/smug1.jpg
http://client.exclaim-inc.com/ryerson/sfi-gray/smug2.jpg

phototristan · September 29, 2014

Hi again,

I'm still not clear on what the issue is. Your screenshots do not look like something abnormal is going on to me unfortunately.

kokoruz · September 29, 2014

phototristan wrote: »

Hi again,

I'm still not clear on what the issue is. Your screenshots do not look like something abnormal is going on to me unfortunately.

The Smugmug video is not centered in either of the videos because it is not scaling to fit. In the screen grab with the larger video window you can see the play button in the bottom corner. In the smaller video the play button is not even in the window.

I can't get it to scale to fit. I've tried using percent but then it just defaults to a small thumbnail size video.

phototristan · September 29, 2014

Thanks for the information.

Are you using the built in embed code which you can get in your SmugMug gallery via the Share button?

kokoruz · September 29, 2014

phototristan wrote: »

Thanks for the information.

Are you using the built in embed code which you can get in your SmugMug gallery via the Share button?

This is the embed code that was provided to me by the client

<iframe frameborder="0" scrolling="no" width="360" height="203" src="http://api.smugmug.com/services/embed/3564179591_7L8M5DG?width=360&height=203&albumId=24640891&albumKey=564PqK"></iframe>

If I use what they provide the video size is hard coded and the video will not scale to fill the space

I have a modified version where I remove the width and height so that it will fill the space.
<iframe class="embed-responsive-item" frameborder="0" scrolling="no" src="http://api.smugmug.com/services/embed/3564183011_rDQCTQD"></iframe>

I have reposted using both the provided embed code and the modified. You will see what I mean.

http://client.exclaim-inc.com/ryerson/sfi-gray/about.html

phototristan · September 29, 2014

You might try experimenting with the width and height number to match what your site designs allows. Note that you would need to change numbers in 2x places each in the first coding. This is the only option for potential altering of the defaulf Smumug video embed coding.

kokoruz · September 29, 2014

phototristan wrote: »

You might try experimenting with the width and height number to match what your site designs allows. Not that you would need to change numbers in 2x places each in the first coding. This is the only option for potential altering of the defaulf Smumug video embed coding.

I appreciate your feedback. It would appear that SmugMug does not support responsive layouts.

I can't really hard code the number because once it gets to the last css break point the width of the video could be between 320 and 768 pixels. That's why it needs to support percent instead of pixels.

Looks like they need to update their player

Thanks Again!

Resposive Video Player

Comments