YouTube video without logo, frame and ads.

Highlighted
New Member
1 0 1

Hi everyone!

 

I'm currently on a website for a customer, and I was asked to upload a YouTube video without a frame, YouTube logo and ads. I indeed ended up doing it, but it's just working on desktop and on iPhone 7(all browsers) but on Android and iPhone 6, for example, it is not working in any browser, it doesn't show at all on those devices.

 

I've done the following:

 

On the edit code of my Simple Toy theme, I created a new section called index.mp4 where I paste the code that you will see below. Then on customize the theme I inserted the URL video on a new section called video with overlay text. It works on desktop, but not so good on mobile devices. 

 

There's any way I can have it also on iPhone 6, Android, etc. or it's just something that some iphones and android don't allow.

 

Thank you!

 

ps. I will attach how should be the YouTube video appear also on mobile. This video doesn't have the frame of YouTube and so on, it looks like I want on desktop, but not on mobile. I mean, only on Iphone 7.

Screenshot 2020-02-18 at 22.49.44.png 

<!-- /sections/index-mp4.liquid -->

<div class="homepage-image preventOverflow {{ section.settings.height }} {{ section.settings.color }}" data-section-id="{{ section.id }}" data-section-type="banner" {% if section.settings.parallax %}data-img-src="{{ background_image }}"{% endif %}>

    <video autoplay loop muted playsinline width="100%">
  <source src="{{ section.settings.videofile }}" type="video/mp4" id="{{ section.id }}">
</video>

  
  {% if section.settings.link_text == '' and section.settings.link and section.settings.button_image == nil %}
    <a href="{{ section.settings.link }}">
  {% endif %}


    <div id="index-mp4-video">
  
</div>

        <div class="content--centered mp4">
      <div class="{{ section.settings.text_align }} preventOverflowContent">
      {% if section.settings.button_image %}
        <a href="{{ section.settings.link }}">
          <img src="{{ section.settings.button_image | img_url: '1000x' }}" alt="{{ section.settings.button_image.alt | default: section.settings.link_text }}" class="image--flex" />
        </a>
      {% else %}
        {% unless section.settings.title == '' %}<h1 class="title--flex">{{ section.settings.title | escape }}</h1>{% endunless %}
        {% unless section.settings.description == '' %}<p class="content--flex h4--body">{{ section.settings.description }}</p>{% endunless %}
        {% unless section.settings.link_text == '' %}<a class="{{ section.settings.button_style }}" href="{{ section.settings.link }}">{{ section.settings.link_text | escape }}</a>{% endunless %}
      {% endif %}
    </div>
  </div>

  {% if section.settings.link_text == '' and section.settings.link and section.settings.button_image == nil %}
    </a>
  {% endif %}
  {% if section.settings.height == 'use_screen_full' %}
  <div class="scroll_icon_wrap">
    <a href="#scroll-{{ section.id }}" class="scroll_link bloop">
      <span class="scroll_icon">{% include 'svg-down' %}</span>
    </a>
  </div>
  <div class="scroll__link" id="scroll-{{ section.id }}"></div>
  {% endif %}
</div>



<script type="text/javascript">
  document.getElementById('{{ section.id }}').play();
$(function () {
  if (!navigator.userAgent.match(/(iPod|iPhone|iPad)/)) {
    $("video").prop('muted', false);
  }
});
</script>


{% schema %}
{
  "name": "Video MP4",
  "settings": [
    {
      "type": "text",
      "id": "videofile",
      "label": "Video URL",
      "default": "https://cdn.shopify.com/s/files/1/2018/8867/files/ice.mp4"
    },
    {
      "type": "header",
      "content": "Text"
    },
    {
      "type": "text",
      "id": "title",
      "label": "Headline",
      "default": "Video with text overlay"
    },
    {
      "type": "textarea",
      "id": "description",
      "label": "Description",
      "default": "This area is used to describe your store."
    },
    {
      "type": "select",
      "id": "text_align",
      "label": "Alignment",
      "default": "text-center",
      "options": [
        { "value": "text-left", "label": "Align Left"},
        { "value": "text-center", "label": "Align Center"},
        { "value": "text-right", "label": "Align Right"}
      ]
    },
    {
      "type":    "range",
      "id":      "overlay_opacity",
      "min":     0,
      "max":     100,
      "step":    5,
      "label":   "Image overlay opacity",
      "info":    "Increase contrast for legible text.",
      "default": 15
    },
    {
      "type": "select",
      "id": "color",
      "label": "Text color",
      "default": "homepage--white",
      "options": [
        { "value": "homepage--white", "label": "White"},
        { "value": "homepage--light", "label": "Light"},
        { "value": "homepage--splash", "label": "Accent"},
        { "value": "homepage--dark", "label": "Dark"}
      ]
    },
    {
      "type": "header",
      "content": "Button"
    },
    {
      "type": "text",
      "id": "link_text",
      "label": "Text",
      "default": "View products"
    },
    {
      "type": "url",
      "id": "link",
      "label": "Link"
    },
    {
      "type": "select",
      "id": "button_style",
      "label": "Button style",
      "default": "btn btn--large btn--clear btn--square uppercase",
      "options": [
        { "value": "btn btn--large btn--splash uppercase", "label": "Round"},
        { "value": "btn btn--large btn--splash btn--square uppercase", "label": "Square"},
        { "value": "btn btn--large btn--clear uppercase", "label": "Transparent round"},
        { "value": "btn btn--large btn--clear btn--square uppercase", "label": "Transparent square"},
        { "value": "btn btn--large btn--outline btn--square uppercase", "label": "Outlined square"}
      ]
    },
    {
      "type": "header",
      "content": "Overlay image (optional)"
    },
    {
      "type": "image_picker",
      "id": "button_image",
      "label": "Replaces all text",
      "info": "1000 x 1000px .png max"
    }
  ],
  "presets": [
    {
      "name": "Video with text overlay",
      "category": "Video"
}
  ]
}
{% endschema %}


{% stylesheet %}
{% endstylesheet %}

 

Highlighted
New Member
1 0 0

This is great, thank you very much!! How do you change the height properties so it remains full bleed but height will be for example 600px ?

0 Likes