Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • September 12, 2020 at 9:54 pm #1245427
    abortolotti

    Hi there,
    I have been given the following code for a player, which I want to embed in a page:

    <style>iframe {width:1px;min-width:100%;}</style>
    <iframe id=”stravideo” src=”https://www.stravideo.eu/channel/vrws-2020-eng/embed/&#8221; allowfullscreen=”true” webkitallowfullscreen=”true” mozallowfullscreen=”true” frameborder=”0″ scrolling=”no” onload=”iFrameResize({log:true,heightCalculationMethod:’taggedElement’}, ‘#stravideo’)”></iframe>
    <script src=”https://www.stravideo.eu/wp-content/themes/stravideo-live/assets/js/iframe/iframeResizer.min.js”></script&gt;

    The code is responsive, however on desktop, I’d like to set a fixed size of 800 x 450 px, so I came up with this code:

    <p style=”text-align: center;”><iframe id=”stravideo” src=”https://www.stravideo.eu/channel/vrws-2020-ita/embed/&#8221; width=”800″ height=”450″ frameborder=”0″ scrolling=”no” allowfullscreen=”allowfullscreen”></iframe>
    <script src=”https://www.stravideo.eu/wp-content/themes/stravideo-live/assets/js/iframe/iframeResizer.min.js”></script&gt;
    </p>

    is there a code, a string or a line I can add, so that the above player only shows on desktop and the first responsive code shows up on mobile only?

    I was thinking that I could add both codes to the same page, but with something else which does what I said above.

    Any help?

    PS: I don’t want to use the preset Enfold option of hiding something depending on the size of the screen, I would rather know which code to add to hide the fixed size player (800×450) to mobile and hide the responsive to desktop.

    Thank you for any help.

    September 14, 2020 at 6:05 am #1245651
    Rikard

    Hey Antonio,

    You should be able to do that if you wrap the code in divs, and give them classes to target:

    <div class="desktop-player">
  Your code goes here
</div>

<div class="mobile-player">
  Your code goes here
</div>

    Then show/hide the correct code using the following CSS:

    @media only screen and (max-width: 767px) {
.desktop-player {
  display: none;
}
}

@media only screen and (min-width: 768px) {
.mobile-player {
  display: none;
}
}

    Best regards,
    Rikard

    September 14, 2020 at 6:50 am #1245660
    abortolotti

    Thank you so much @Rikard! Really appreciate.

    On a different note, I was thinking of opening the event to the public for free for the first hour and do that by copying the above code into a specific page within the Enfold website.

    However, is it correct that if I -let’s say – enter into the page after one hour, delete the embedded player, then update the page, but viewers are still on the public page without refreshing it, they will keep viewing the player and the broadcast?

    If so, is there a way to block viewers of the page from viewing the content after one hour?

    Thank you so much for your great help.

    Antonio

    September 15, 2020 at 5:20 am #1245913
    Rikard

    Hi Antonio,

    I think they will be able to continue watching if it’s already open, unless you delete the actual file they are watching. The theme doesn’t come with any solution to what you are looking to achieve unfortunately, and I’m not aware of any third party solution for that either.

    Best regards,
    Rikard

    September 15, 2020 at 8:30 am #1245949
    abortolotti

    Hi Rikard,

    thank yo so much for the much needed clarification, I really appreciate.
    You can consider the post closed, thank you

    Have a great day

    Antonio

    September 16, 2020 at 6:02 am #1246161
    Rikard

    Hi Antonio,

    Thanks for the update, I’ll go ahead and close this thread for now then. Please open a new thread if you should have any further questions or problems.

    Best regards,
    Rikard

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Hiding code on desktop or mobile view’ is closed to new replies.