Fixed frame location around video

  • fursttedesco

    (@fursttedesco)


    4 years ago

    Hi everyone,

    Maybe someone with advanced WP knowledge can help me out here:

    I am trying to permanently fix the gold frame on the main page of our website, so that in the future we can exchange videos in said frame – but simultaneously always keep the frame at this position, not moving it when scrolling, only adjusting the size on, for example, the mobile version.

    At this stage, we have a round-about solution by inserting a full-scale video made in photoshop, but this is no appropriate long-term approach. I have read about the iFrame function, but am unsure how to apply it in our case (https://jsfiddle.net/4g9e3ywy/).

    Any help is much appreciated!

    Thanks ??

    The page I need help with: [log in to see the link]

Viewing 1 replies (of 1 total)
  • Moderator bcworkz

    (@bcworkz)

    To fix the position of elements in the viewport, use CSS position: fixed;. But that will not work very well with other elements on the page.

    Video embeds from services like YouTube and Vimeo take the form of iframes. For self hosted videos, you can use the <video> tag. Either element can be position fixed just like the frame image. Set the element height and width as needed to fit nicely in the frame image. Fiddle with top and left positioning as well as margin settings to fine tune the final locations.

    Your browser’s element inspector tool will be a good asset in determining just the right size and positioning rules that you will need.

Viewing 1 replies (of 1 total)
  • The topic ‘Fixed frame location around video’ is closed to new replies.