Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • February 9, 2019 at 2:42 am #1064817
    radnerreyes

    Hi,

    Is there a way to embed something like this – https://player.pixilink.com/16102 – onto a webpage and have it full screen and possibly have it under the header/menu?

    I tried the video element in the advanced layout builder but it just ends up showing a black box with the URL.

    I also tried the code:

    <iframe src=”http://player.pixilink.com/16102&#8243; width=”100%” height=”100%”></iframe>

    But the height doesn’t seem to go to maximum.

    There also seems to be white borders on the side of each method. Any suggestions on how else ot move forward?

    February 10, 2019 at 4:57 am #1065046
    Rikard

    Hey radnerreyes,

    The last attempt on the page seems to work the best, if you want to make the container on that page full width then please try this in Quick CSS:

    .page-id-29663 #main .container {
    max-width: 100%;
    padding: 0;
}

    Best regards,
    Rikard

    February 10, 2019 at 5:20 am #1065052
    radnerreyes

    Thank you!

    What if I have a custom css for the code block. What part of that Quick CSS code would I replace? And would I just replace it with #custom-css? I would like to create a template with the same custom CSS code so I don’t always have to have the page-id change in the quick css.

    Also, I changed the iframe height to 1000px to make it look better for desktop. On desktop, if I don’t change the height, it stays pretty small. After changing the height I noticed this time it doesn’t look too good on mobile – it gets stretched vertically. Is there a way to have the code only be 1000px in height on desktop, and only 100% in height on mobile?

    February 13, 2019 at 3:02 am #1066177
    Ismael

    Hi,

    Thanks for the update.

    Have you tried moving the code block inside a grid row element with a single cell? You won’t have to add that css code then. And you can use css media queries to specify the iframe height for different screen sizes.

    // https://www.w3schools.com/css/css_rwd_mediaqueries.asp

    Best regards,
    Ismael

    February 14, 2019 at 1:40 am #1066711
    radnerreyes

    Hi Ismael,

    I didn’t even think of the grid row element and just removing the padding. Works the way I wanted. Thank you.

    I’ll look into those media queries. Thank you

    February 15, 2019 at 4:59 am #1067272
    Rikard

    Hi,

    Great, I’m glad you got it working. Please let us know if you should need any further help on the topic or if we can close it.

    Best regards,
    Rikard

    February 16, 2019 at 2:50 am #1067604
    radnerreyes

    I think it can be closed. Thank you!

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.