Измените размер встраивания Twitch - PullRequest
Новая
       32

Измените размер встраивания Twitch

0 голосов
/ 14 июля 2020

Я использую сервис для встраивания twitch на свой сайт, но не знаю, как изменить его размер по своему усмотрению. это на самом деле веб-сайт https://imgur.com/a/sYrzLH9,

это html: 

<!--twitch: https://dev.twitch.tv/docs/embed/everything-->
<div class="twitch-stream">
    <!-- Add a placeholder for the Twitch embed -->
    <div id="twitch-embed"></div>

    <!-- Load the Twitch embed script -->
    <script src="https://embed.twitch.tv/embed/v1.js"></script>

    <!-- Create a Twitch.Embed object that will render within the "twitch-embed" root element. -->
    <script type="text/javascript" class="twitch-stream-script">
        new Twitch.Embed("twitch-embed", {
            width: "100%",
            height: "100%",
            theme: "dark",
            channel: "Monstercat",
            // only needed if your site is also embedded on embed.example.com and othersite.example.com 
            parent: ["embed.example.com", "othersite.example.com"]
        });
    </script>
</div>

и css: 

.twitch-stream {
position: relative;
float: right;
right: 0.5vw;
top: 1vh;

} 

.twitch-stream-script {
position: relative;
top: 100vh;
max-width: 65%;
max-height: 90vh;

}

, как вы можете видеть, у меня есть число пи c слева, и оно занимает 35% страницы, и я хотел бы, чтобы поток занимал остальное (65%). Как мне это сделать?

Я думал о стилизации с помощью css скрипта, но я не могу этого сделать (на самом деле это есть в коде, но с ним или без него ничего не меняет)

1 Ответ

0 голосов
/ 14 июля 2020

Вы должны привязать свой твич к div и css к нему. 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #avatar_wrapper {
            width: 35%;
            display: inline-block;
        }
        #twitch_wrapper {
            width: 65%;
            display: inline-block;
            float: right;
        }
        .clear {
            clear: both;
        }

    </style>
    <!-- Load the Twitch embed script -->
    <script src="https://embed.twitch.tv/embed/v1.js"></script>
</head>
<body>

<div id="container">

    <div id="avatar_wrapper">
        your image here
    </div>

    <div id="twitch_wrapper">
        <!--twitch: https://dev.twitch.tv/docs/embed/everything-->
        <div class="twitch-stream">
            <!-- Add a placeholder for the Twitch embed -->
            <div id="twitch-embed"></div>

            <!-- Create a Twitch.Embed object that will render within the "twitch-embed" root element. -->
            <script type="text/javascript" class="twitch-stream-script">
                new Twitch.Embed("twitch-embed", {
                    width: "100%",
                    height: "100%",
                    theme: "dark",
                    channel: "Monstercat",
                    // only needed if your site is also embedded on embed.example.com and othersite.example.com
                    parent: ["embed.example.com", "othersite.example.com"]
                });
            </script>
        </div>
    </div>
    <div class="clear"></div>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita, facere harum maiores molestias mollitia neque officia pariatur, quidem rem repellat sint voluptas? Atque, libero magnam maiores modi molestias omnis tempore?</p>

</div>

</body>
</html>
...