Home Forums Air WordPress Theme How to add multiple video’s to post page?

Viewing 22 posts - 1 through 22 (of 22 total)
  • Author
    Posts
  • #23653
    applemint
    Participant
    Purchased
    Supported

    Hi,
    I have Air theme for WordPress.

    In a post page (which is a project, listed in the portfolio page) I would like to add multiple video’s. I can add one, but not more. How to add more than one video?
    I am using Layout Template: Gallery on Right
    I would like the video’s (vimeo and/or youtube) to show up in the post Gallery (with or without images).

    Additional question: Vimeo video’s don’t seem to include the title of the video, nor does it show a fullscreen button when it is playing, whereas Youtube video’s do.

    Thank you!

    #23654
    SeaTheme
    Keymaster
    Purchased
    Expired

    Hi,
    Thank you for purchasing our theme.

    1. please refer to https://seatheme.net/forums/topic/air-wordpress-theme-faqs/#post-17588

    2. It seems that the options are available only for paid accounts https://vimeo.zendesk.com/hc/en-us/articles/224972808-Customizing-the-embedded-player
    I cannot give you more suggestion, I don’t have a paid Vimeo account.

    Regards!

    SeaTheme – SeaTheme.netTwitterFacebook

    #23675
    applemint
    Participant
    Purchased
    Supported

    1. That code works, thank you. Though, I notice that with the video code as suggested in #post-17588, I can no longer move images in the gallery around nor add new images. To do that, I first need to remove the embedded code, click “update”, then move images around or add new ones, click “update”, and then add video code again. (in case anyone would encounter this issue too)

    2. Regarding vimeo, the “share” button shows embedded code with “+ more options” button that allows you to choose how you like the video to appear, which adjusts the embedded code accordingly.

    #23676
    applemint
    Participant
    Purchased
    Supported

    However, I have one additional question for the same setup (post with Gallery on Right template), namely, how do I align the title and text on left, with gallery on the right?
    Thank you!

    #23680
    SeaTheme
    Keymaster
    Purchased
    Expired

    Hi,

    Please remove the quotation marks in the embed codes , refer to the format https://seatheme.net/forums/topic/air-wordpress-theme-faqs/#post-17588

    Sorry, I don’t know more things about the Viemo embed rule.

    Please select the “Gallery on right”: https://www.dropbox.com/s/mejl4mc656vh1uu/qq20210124-131036.jpg?dl=0

    Regards

    #23681
    applemint
    Participant
    Purchased
    Supported

    Hi,
    Removing quotation marks in the embed codes cause new problems. Vimeo video won’t show up this way, and Youtube video will have a different shape (higher).
    Any suggestions for my other question, on how to align top of Post title with top of gallery on the right (be it photo or video?)
    Regards

    #23684
    SeaTheme
    Keymaster
    Purchased
    Expired

    Hi,
    1. The quotation marks will cause editing and security issues.
    Please refer to the embed code format without quotation marks, I updated it just now.
    https://seatheme.net/forums/topic/air-wordpress-theme-faqs/#post-17588
    Please replace the video ID and padding-bottom only.

    2.
    I don’t understand your question. It will overlay with the header if force the post title to align the top of the image. Could you leave your gallery-right page URL?

    Regards

    #23706
    applemint
    Participant
    Purchased
    Supported

    1. Thank you. Following instruction to only replace video ID and padding-bottom, works.

    2. I am working on Ampps, but will send you 2 images to show what I mean.

    #23707
    applemint
    Participant
    Purchased
    Supported
    This reply has been marked as private.
    #23708
    SeaTheme
    Keymaster
    Purchased
    Expired

    Please try to use the custom CSS to adjust the top spacing align:

    @media (min-width: 768px) {
      body.single.single-portfolio-2c-body .title-wrap { margin-top: 40px; }  /* title top-spacing  from header */
      body.single.single-portfolio-2c-body .blog-unit-gallery-wrap { padding-top: 40px; }/* video top-spacing  from header */
    }

    You could adjust the value(40)

    Regards

    #23718
    applemint
    Participant
    Purchased
    Supported

    Great, thank you so much, this works!

    Would there be a way to have a second line in the post title, like a subtitle also having “Title Text Masking”?
    An example:

    Project Post Title
    with Company XYZ

    Post text follows….

    I tried adding to your line above in the title-wrap ” margin-bottom: 0 px; “. This allows me to set a header in the post text, as a subtitle without the full 40 px bottom margin . Though it removes all “Title Text Masking” from the original title.

    #23721
    SeaTheme
    Keymaster
    Purchased
    Expired

    Welcome!

    I need to check the live page. I don’t know where is wrong only by descriptions. When your website is online, I will check it, ok?

    Regards

    #23724
    applemint
    Participant
    Purchased
    Supported

    Okay, thank you so much. I’m much pleased with your service!

    #23735
    applemint
    Participant
    Purchased
    Supported

    With regards to inserting video to the gallery, I came across some YouTube video’s that are not working with the proposed embedded code. I tried on both Firefox and Chrome.
    For example these video’s:
    https://www.youtube.com/watch?v=_tkCg6R6dB0
    https://www.youtube.com/watch?v=rS2V4gTOxdc
    As a test, I tried these video’s also on another site with a different WP theme, where they do work.
    Any suggestions?

    #23741
    SeaTheme
    Keymaster
    Purchased
    Expired

    Hi,

    Please make sure the embed codes is:

    <div class=video-wrap style=padding-top:56.667%><iframe src=//www.youtube.com/embed/_tkCg6R6dB0 frameborder allowfullscreen></iframe></div>
    <div class=video-wrap style=padding-top:56.667%><iframe src=//www.youtube.com/embed/rS2V4gTOxdc frameborder allowfullscreen></iframe></div>

    custom CSS:

    .single-gallery-wrap-inn > .video-post-wrap { padding-top: 0!important; }
    .single-gallery-wrap-inn > .video-post-wrap .video-wrap { margin-bottom: 40px; }
    .single-gallery-wrap-inn video.lazy-hidden { opacity: 1;position: absolute; top: 0; left: 0;right: 0;  bottom: 0; }

    I tested it and worked.

    If your page doesn’t work, better leave the page URL.
    Or paste some screenshots

    Regards

    #23749
    applemint
    Participant
    Purchased
    Supported

    Hi,

    1. Thanks again for including the codes in this case. When copy pasting exactly your codes above, it does indeed work in AIR theme.

    I had https:// before the Youtube link.
    But not only that, what took me longer to see is that your link is also different than the one I used. Yours replaced watch?v= with embed/

    I’m not fully understanding what that last change does, but it makes sense, since the Firefox warning said that “www.youtube.com will not allow Firefox to display the page if another site I refer has embedded it”.

    2. One more question, regarding the aspect ratio that can be set under the video code. How to find the exact ratio of a particular video on Youtube or vimeo? I have searched without finding an answer, except for articles about what the different standard ratios are.

    #23750
    SeaTheme
    Keymaster
    Purchased
    Expired

    Hi,

    1. It works on my Firefox: https://www.dropbox.com/s/j5lrvbn7mybkwfp/qq20210201-114051.jpg?dl=0

    2. The radio is set with the padding-top, it is a percentage, video height / width

    how-to-find-embed-youtube-video-width-height:
    https://doc.seatheme.net/wp-content/uploads/2019/10/how-to-find-embed-youtube-video-width-height-573×1024.jpg
    how-to-find-embed-vimeo-video-width-height:
    https://doc.seatheme.net/wp-content/uploads/2019/10/how-to-find-embed-vimeo-video-width-height.jpg

    e.g
    56.25% = 9(video height) / 16(video width) * 100%

    Regards

    #23758
    applemint
    Participant
    Purchased
    Supported

    Thank you.

    2. It seems like most video’s have the 56.2% ratio. Some video’s are different. Would it matter if you have two videos with two different ratios in one post gallery – since you can only set one ratio for all videos in that post? Or is it okay, to just choose one?

    3. Would it be possible to also add video’s in post gallery that are not youtube or vimeo? Like this video that can be found on archive.org?
    https://archive.org/details/orca_7921

    When clicking on the share button on the right below the video, this imbed info shows up:
    EMBED (for wordpress.com hosted blogs and archive.org item <description> tags):
    [archiveorg orca_7921 width=640 height=480 frameborder=0 webkitallowfullscreen=true mozallowfullscreen=true]

    More info on embedding from archive.org is shown here:
    https://archive.org/help/video.php?identifier=orca_7921

    #23759
    applemint
    Participant
    Purchased
    Supported

    3. The video mentioned on archive.org also includes this embed info:
    EMBED
    <iframe src=”https://archive.org/embed/orca_7921&#8243; width=”640″ height=”480″ frameborder=”0″ webkitallowfullscreen=”true” mozallowfullscreen=”true” allowfullscreen></iframe>

    #23762
    SeaTheme
    Keymaster
    Purchased
    Expired

    Hi,

    2,
    sure, you could change the value, it can be different for different video by the padding-top inline style:
    https://www.dropbox.com/s/t694quomqhw9hmr/qq20210203-102209.jpg?dl=0

    PS: the ratio in the post option will not work for the custom codes, please ignore it

    3, yes, it is possible

    Please make sure the embed codes is:

    <div class=video-wrap style=padding-top:56.667%><iframe src=https://archive.org/embed/orca_7921 allowfullscreen></iframe></div>
    <div class=video-wrap style=padding-top:56.667%><iframe src=https://archive.org/embed/orca_7921 allowfullscreen></iframe></div>

    Please don’t add quotation marks still.

    Regards

    #23791
    applemint
    Participant
    Purchased
    Supported

    2. so the % in the code refers to the ratio, can be adjusted accordingly and overrides the ratio selection field that can be selected underneath the embedded code field?

    How about the height and width in the code width=500 height=281 , should that be adjusted accordingly too, or does that stay the same at all times?

    3. thanks, glad it can also be embedded.

    #23793
    SeaTheme
    Keymaster
    Purchased
    Expired

    Hi

    Yes

    The width and height are not necessary. They do not work in the custom codes in fact.

    Regards

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

Join Newsletter(FREE)

Subscribe to our newsletter to receive news & updates. We promise to not spam you, super promise!