On a site loaded with pictures and videos, do you still recommend 2 separate sites, one for mobile and one for desktop. I'm assuming responsive is not able to load certain media for different screen sizes? Example would be a 720p video for desktop and a smaller video for mobile? Or am I wrong?

With a little customization you can get your videos to shrink as it goes down in size. See a website i did here

http://riffa.ca/riffa-studio.html

Are you loading a different size video or just shrinking that same one down? I'd like to load say a 100mb video for desktop but only maybe a 10mb video for mobile. Loading a desktop size video for mobile would kill a mobile users bandwidth and load very very slow.

Maybe there's a way to do it in js? I'll have to research it some.

Really your wanting to detect band width because not all pc users have fast connections.

No I want to detect screen size or device (mobile or desktop) and send the appropriate size video. All pc users would get the same 100mb video. There is no need for mobile users to load a 100mb video.

I see what you're saying now Eric. I misread that before. I'll have a look at that too. Load a certain video by bandwidth. Thanks

Mark, you don't need to do anything as far as the video file size etc, other than make the video responsive assuming its a Youtube or Vimeo video, these services handle the delivery...

See this ( https://css-tricks.com/NetMag/FluidWidt … hVideo.php )

Hope it helps :-)

OK, here's a work around to get this done if you don't want to mess with CSS...

Step 1. You will need to download this framework here, uncheck everything except for flex video ( http://foundation.zurb.com/develop/download.html )

Step 2. Save the download folder in your RSD project

Step 3. Open your RSD project and go to the Elements Panel

Step 4. Drag an HTML Element where you want the video to display

Step 5. Select the HTML Element and paste your Youtube/Vimeo video code - I'll attach screenshots just incase - Important - Give your HTML element this class name - copy and paste it, without the brackets ( flex-video widescreen vimeo )

Step 6. In the Settings Panel, Add resources in the Head Section - Click Add Resources and navigate to the folder contain the framework you downloaded and select from the CSS folder ( foundation.min.css )

Step 7. Repeat step 6 - this time select from the JS folder and ( foundation.min.js )

Step 8. Still in the Settings Panel, paste this script in the Footer Section ( <script>
$(document).foundation();
</script> )

Step 9. Preview and resize your browser to see this work

Step 10. If you run into any snags, let me know...

Hope this helps you and anyone that might want to use this hack... Cheers!

Thanks Kelvin.
These aren't videos that can be uploaded to Youtube or Vimeo
I need a solution to stream videos from my server.

No worries Mark, since you need to stream from your server, you could try using media queries, large file for desktop, small for mobile, just a thought... If I remember from my video streaming days, you will/may need some type of media server software depending on the complexity of what you are trying to do. Try googling Flash Media Server to see what comes up, I did a lot with this back in the days :-)