Shortcodes / Video Icon
Video Icon
… Add a Video Icon
Add a Video Icon HTML
- In your blogger dashboard.
- Go to "Layout".
- Locate the section.
- Click on "Add a Gadget" and we recommend adding these widget:
+ Widget "HTML/JavaScript" To add component codes.
- Select and paste the Code
- Select "#" and paste you link.
- Click "Save".
Add code link youtube:
- Go to the video on Youtube.
- Click button "Share".
- Link the Youtube "... youtu.be/g6FaKHJtKuU".
- Copy "g6FaKHJtKuU".
- Copy Code and add in "Sections" or "Posts or Pages".
- Paste code Widget "HTML/JavaScript".
- Click "Save".
Code:
Minimal
<button class=" Your Class " data-video="https://www.youtube.com/embed/g6FaKHJtKuU "> You title </button>
Full
<button type="button" class=" Your Class " data-bs-toggle="modal" data-bs-target="#videoModal" data-video=" https://www.youtube.com/embed/g6FaKHJtKuU "> You title </button>
Edit Code:
- Copy the code.
- Open notepad or a code editor.
- select code "class size" and "Any of the styles".
- Paste the code in "Your class".
- Paste your link in "Your link".
- Add your title in "Your title".
Code:
Minimal
<button class=" Your Class " data-video=" Your Link "> You title </button>
Full
<button type="button" class=" Your Class " data-bs-toggle="modal" data-bs-target="#videoModal" data-video=" Your Link "> You title </button>
Code Class:
… Class Size
video-player-1x
video-player-2x
video-player-3x
video-player-4x
video-player-5x
<button type="button" class="video-player-1x" data-bs-toggle="modal" data-bs-target="#videoModal" data-video=" Your Link "> Your Title </button>
… Theme Color
video-primary
video-dark
video-secondary
video-light
video-success
video-danger
video-warning
video-info
<button type="button" class="video-player-1x video-primary" data-bs-toggle="modal" data-bs-target="#videoModal" data-video=" Your Link "> Your Title </button>
… Theme Outline
video-outline-primary
video-outline-dark
video-outline-secondary
video-outline-light
video-outline-success
video-outline-danger
video-outline-warning
video-outline-info
<button type="button" class="video-player-1x video-outline-primary" data-bs-toggle="modal" data-bs-target="#videoModal" data-video=" Your Link "> Your Title </button>
… Theme Flat
video-flat-primary
video-flat-dark
video-flat-secondary
video-flat-light
video-flat-success
video-flat-danger
video-flat-warning
video-flat-info
<button type="button" class="video-player-1x video-flat-primary" data-bs-toggle="modal" data-bs-target="#videoModal" data-video=" Your Link "> Your Title </button>
… Theme Link
video-link-primary
video-link-dark
video-link-secondary
video-link-light
video-link-success
video-link-danger
video-link-warning
video-link-info
<button type="button" class="video-player-1x video-link-primary" data-bs-toggle="modal" data-bs-target="#videoModal" data-video=" Your Link "> Your Title </button>