Mobile site big

It's because the iframe has a static width and height.

HTML:

<iframe width="560" height="315" src="https://www.youtube.com/embed/U3exSnfRaYE" frameborder="0"></iframe>

You could probably fix this by doing:

HTML:

<div class="yt-container">
    <iframe src="https://www.youtube.com/embed/U3exSnfRaYE" frameborder="0"></iframe>
</div>

CSS:

.yt-container {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
}
.yt-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

See this fiddle as well:
http://jsfiddle.net/not430hj/

 

Fixing the background is easy as well,

Background on mobile devices:

CSS:

Code:

background-image:url(http://maplelegends.com/static/images/bg.png);
background-attachment: fixed;
background-position: 50% 0%;
background-repeat: repeat-y;
-webkit-background-size: cover;  
-moz-background-size: cover;   
-o-background-size: cover;   
background-size: cover;