Hide Forgot
Description of problem: Go to blog page with video on community on iPhone4S, like this https://www.openshift.com/blogs/migrate-your-java-application-from-heroku-to-openshift . Try to zoom the screen to watch video. Then the header, footer and nav bar can't autofit the screen. See detail in screenshot1. Also the picture of author and time of blog are overlapping on iPhone4S. See detail in screenshot2. Version-Release number of selected component (if applicable): PROD How reproducible: Always Steps to Reproduce: 1. Go to community on iPhone4S 2. Check blog page with video, like https://www.openshift.com/blogs/migrate-your-java-application-from-heroku-to-openshift 3. Zoom the screen and check header, footer and nav bar 4. Check picture of author and time Actual results: After zooming, header, footer and nav bar can't autofit screen. The picture of author and time of blog are overlapping. Expected results: Header, footer and nav bar should autofit the screen. The picture of author and time of blog should not overlapping on iPhone4S. Additional info:
Created attachment 838888 [details] screenshot1
Created attachment 838890 [details] screenshot2
Videos are embedded in blog posted using an <iframe>. To correct this bug a <div with the class="media-youtube" needs to wrap the <iframe>. This will enable the video to resize appropriately based on the browser width of the users device. Since this content is manually entered by the blog author, they will need to include the <div class="media-youtube"><iframe> markup at the time of creating the blog post. Thus this won't be handled with a single commit fix. An email was sent to shifters, who are the ones creating blog posts, and informed them of including the correct markup noted above.