WSTEAM1-1588: Bug Fix - Media Player blocking content in no CSS mode

[Isabella-Mitchell]

Resolves JIRA N/A

Possible solution to WSTEAM1-1588. See more in Paper Doc.

Overall changes

Adds an element below media player. This "pushes down" the content currently being blocked.

Code changes

• In instances without a placeholder, adds an SVG below media container if mediaType is 'audio_video' or 'video'
• Uses "display:none" to hide SVG with CSS. (So will only show if CSS is disabled)

Testing

"Pushes down" content

• Media Article Page: http://localhost.bbc.com:7080/afrique/articles/c391nwxpx7zo?renderer_env=live
• Media Article Page (inc Portrait Video): http://localhost.bbc.com:7080/arabic/articles/c0e4xr4p0p9o?renderer_env=live
• Live page (with live stream): http://localhost.bbc.com:7081/mundo/live/c7dkx155e626t
• MAP: http://localhost.bbc.com:7080/hausa/labarai-51622389?renderer_env=live
• MAP (TC2): http://localhost.bbc.com:7080/arabic/multimedia/2016/06/160601_qatar_sewika_smoking?renderer_env=live

Should have no affect (not video/ audio_video content)

• OD Radio (brand): http://localhost.bbc.com:7080/hausa/bbc_hausa_radio/programmes/p030s4mh?renderer_env=live
• OD Radio (programme): http://localhost.bbc.com:7080/hausa/bbc_hausa_radio/w172zxmr98hk6qr?renderer_env=live
• Podcast (brand): http://localhost.bbc.com:7080/hausa/podcasts/p08mlgcb?renderer_env=live
• Podcast (episode): http://localhost.bbc.com:7080/hausa/podcasts/p08mlgcb/p09l0fw6?renderer_env=live
• Radio (Live): http://localhost.bbc.com:7080/hausa/bbc_hausa_radio/liveradio?renderer_env=live

Will have no affect (uses placeholder)

• OD TV (brand): http://localhost.bbc.com:7080/hausa/bbc_hausa_tv/tv_programmes/w13xttn0?renderer_env=live
• OD TV (episode): http://localhost.bbc.com:7080/hausa/bbc_hausa_tv/tv/w172yjj83ptptnj?renderer_env=live
• Article Page (inc. portrait video): http://localhost.bbc.com:7080/mundo/articles/c1xv2q1gewvo?renderer_env=test
• Live page (with video in post): http://localhost.bbc.com:7081/arabic/live/cvg8n9xeglgt?renderer_env=live

Helpful Links

Add Links to useful resources related to this PR if applicable.

Coding Standards

Repository use guidelines

[Isabella-Mitchell]

Closing this PR since we've identified this bug is specific to the Web Developer extension on Chrome. It does not occur when CSS is fully removed.