Responsive Video in RSD Hack
I was responding to someones post on how to make video responsive in RSD and came up with this hack, I figured it would be nice to share it to all...
I've attached 2 screenshots for reference...
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 containing 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!