Need help, ideas on tweaking the youtube payer view in small iframes on smartphones.
I am trying to create YouTube iframes in a news feed list view - where the news could be an image or a YouTube video. The format is a list of news articles in rectangles, with the media div on the left, and then a subject and text on the right.
Youtube says that the minimum size is 200x200. It actually works well at smaller sizes on desktop browsers like 169x91. But on a smartphone, I need to go smaller because you are actually holding the device closer to your face. It ends up being 104 x 56. This still works well on a desktop browser, but on a smartphone you end up with a play button that is way to big and when you hit play, it opens up a new tab and plays the video in a separate window.
Note: I have tried using the iframe api and gotten the same thing.
Manually, in developer mode and in smartphone mode, I can tweak the play button in my browser by editing the .ytp-icon-large-play-button-hover element. But when I do this in code - I get stopped for cross site scripting.
In developer mode, and in desktop mode I see that this element appears and does the editing I would want.
.ytp-small-mode .ytp-large-play-button {
width: 42px;
height: 30px;
margin-left: -21px;
margin-top: -15px;
}
Below is some sample code. It doesn't work so well in the code snippit viewer because of interactions with the viewer. Better to run it locally. This is what it looks like in chrome in developer mode, on a smulated Samsung Galaxy Note 4. It also looks this way on the real thing.
Any idea's on how to make the smaller have a smaller play button on a smartphone??? I mostly want it to look and work on the smartphone as it does on the desktop. I would love to be able to override the css of the player to change font sizes and other things. But - I wouldn't want it to break after YouTube does is an update.
<!doctype html>
<html>
<meta charset="utf-8" />
<title>YouTube-small-demo</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style media="screen" type="text/css">
body {
font-size: 13px;
}
.panel {
max-width: 962px;
margin: auto;
}
.item {
border: 1px solid #666;
padding: 0.5em 0 0 0.5em;
background-color: #fff;
}
.item-media {
float: left;
margin-right: 0.5em;
padding-bottom: 0.5em;
height: 7em;
max-width: 13em;
text-align: left;
}
.video-container {
max-height: 7em;
max-width: 13em;
overflow: hidden;
}
.item-text {
padding: 0;
padding-right: 0.5em;
}
.item-subject {
margin: 0;
text-align: left;
padding: 0 0 0.25em;
font-size: 1.375em;
}
.item-description {
display: inline;
line-height: 1.375em;
}
.clear {
clear: left;
}
</style>
<body>
<div class="panel" style="font-size: 13px;">
<div class="item">
<div class="item-media-wrapper">
<div class="item-media">
<div class="video-container">
<iframe id="ytplayer" controls="" type="text/html" allowfullscreen="" frameborder="0" width="169" height="91" src="http://www.youtube.com/embed/9MHwDZQOVaU?autoplay=0">
</iframe>
</div>
</div>
</div>
<div class="item-text">
<h4 class="item-subject">This is the size for desktop screens</h4>
<div class="item-description">
<p>On a desktop browser the play button is gray until you mouse over it and it turns red.</p>
<p>On a smartphone (go ahead and put your desktop browser into developer mode choose a smartphone) -
The button is a little bigger than it was in desktop mode, and it is red all the time.</p>
</div>
</div>
<div class="clear"></div>
</div>
</div>
<div class="panel" style="font-size: 8px;">
<div class="item">
<div class="item-media-wrapper">
<div class="item-media">
<div class="video-container">
<iframe id="ytplayer" controls="" type="text/html" allowfullscreen="" frameborder="0" width="104" height="56" src="http://www.youtube.com/embed/9MHwDZQOVaU?autoplay=0">
</iframe>
</div>
</div>
</div>
<div class="item-text">
<h4 class="item-subject">This is the size for smartphones</h4>
<div class="item-description">
<p>The font is smaller (8px) because you are holding your smartphone closer to your face, and the smartphone is lying to the browser, the clientWidth and clientHeight reported are a fraction of the actual resolution because of the device pixel ratio.</p>
<p>On a desktop browser the play button is gray until you mouse over it and it turns red.</p>
<p>On a smartphone (go ahead and put your desktop browser into developer mode choose a smartphone)
The button is way too big, actually the same size as is for the larger iframe size, and it is red all the time.</p>
<p>And on a smartphone, when you hit play it opens another tab and plays in a separate window</p>
</div>
</div>
<div class="clear"></div>
</div>
</div>
</body>
</html>
