Bug 1044938

Summary: Improper pattern for blog page with video on community on iPhone4S
Product: OpenShift Online Reporter: Tian Feng <tfeng>
Component: WebsiteAssignee: Clayton Coleman <ccoleman>
Status: CLOSED CANTFIX QA Contact: libra bugs <libra-bugs>
Severity: low Docs Contact:
Priority: low    
Version: 2.xCC: sgoodwin, xtian
Target Milestone: ---   
Target Release: ---   
Hardware: Unspecified   
OS: Unspecified   
Whiteboard:
Fixed In Version: Doc Type: Bug Fix
Doc Text:
Story Points: ---
Clone Of: Environment:
Last Closed: 2013-12-19 20:58:41 UTC Type: Bug
Regression: --- Mount Type: ---
Documentation: --- CRM:
Verified Versions: Category: ---
oVirt Team: --- RHEL 7.3 requirements from Atomic Host:
Cloudforms Team: --- Target Upstream Version:
Attachments:
Description Flags
screenshot1
none
screenshot2 none

Description Tian Feng 2013-12-19 09:27:44 UTC 
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:
Comment 1 Tian Feng 2013-12-19 09:28:18 UTC 
Created attachment 838888 [details]
screenshot1
Comment 2 Tian Feng 2013-12-19 09:29:13 UTC 
Created attachment 838890 [details]
screenshot2
Comment 3 Steve Goodwin 2013-12-19 20:58:41 UTC 
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.