Question

在智能手机上的小型iframe中调整youtube付款人视图需要帮助和建议。

我正在尝试在新闻Feed列表视图中创建YouTube iframe - 新闻可能是图片或YouTube视频。格式是矩形中的新闻文章列表，左侧是媒体div，右侧是主题和文本。

Youtube说最小尺寸为200x200。它实际上适用于像169x91这样的桌面浏览器上的较小尺寸。但是在智能手机上，我需要变小，因为你实际上是将设备靠近你的脸。它最终只有104 x 56.这在桌面浏览器上仍能很好地运行，但是在智能手机上，你最终会得到一个很大的播放按钮，当你点击播放时，它会打开一个新标签并播放视频一个单独的窗口。

注意：我尝试过使用iframe api并得到同样的东西。

手动，在开发者模式和智能手机模式下，我可以通过编辑.ytp-icon-large-play-button-hover元素来调整浏览器中的播放按钮。但是当我在代码中执行此操作时 - 我因跨站点脚本而停止运行。

在开发者模式下，在桌面模式下，我看到此元素出现并进行我想要的编辑。

.ytp-small-mode .ytp-large-play-button {
    width: 42px;
    height: 30px;
    margin-left: -21px;
    margin-top: -15px;
}

下面是一些示例代码。由于与查看器的交互，它在代码snippit查看器中不能很好地工作。最好在本地运行它。这就是它在开发者模式下的chrome，在一个微软的三星Galaxy Note 4上的样子。它看起来也是这样的。

如何制作更小的任何想法在智能手机上都有一个较小的播放按钮???我主要希望它能像在桌面上一样在智能手机上查看和工作。我希望能够覆盖播放器的CSS来改变字体大小和其他东西。但是 - 我不希望它在YouTube发布后更新。

<!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>

Answer 1

尝试将位置设为绝对位置或将大小包含在内。

如何为youtub播放器调整CSS因为播放按钮在小型智能手机播放器上太大了

1 个答案: