Video Format Issue Under Units

[Bhavyatafoundation]

Hello!! I was trying to add a video under one of my unit activities. And while doing so I'm facing a number of issues.

1. The youtube video on the backend is cropped off. So I tried using the video from the media file of the website and it displays a better frame than youtube.
2. After experimenting with both the formats I published the unit under the course section and when I went to check it out it was a whole setback to the unit. When clicked on the unit you can see the whole Navigation panel on the left side of the screen relocates to the top only for the particular unit.
3. The video embedded via youtube and that integrated via the media section of WordPress is not displayed at all. There happens to be no issue when previewed at the backend but on the user side its a mess.

Please tell me what's wrong with this? And how can I resolve this issue? Video Indicating Issues Also, If you want to have a look at the code of that particular unit here you go:

<div class="vibe_editor_shortcode"><div class="vibebp_tabs_wrapper"><div class="vibebp_tab_titles"><label for="tabs_9ItqlJThy2QWLKQ_0" class="vibebp_tab_title">Yog</label><label for="tabs_9ItqlJThy2QWLKQ_1" class="vibebp_tab_title">Prayer</label></div><div class="vibebp_tab_content_wrapper"><input type="radio" name="tabs_9ItqlJThy2QWLKQ" id="tabs_9ItqlJThy2QWLKQ_0" checked><div class="vibebp_tab_content vibe_editor_column_content tabs_9ItqlJThy2QWLKQ_0"><div class="vibe_editor_media"><img src="https://learn.bhavyata.com/wp-content/uploads/2021/11/yoga-beach-sunset-2021-08-28-05-57-55-utc-1-scaled.jpg"  title="yoga-beach-sunset-2021-08-28-05-57-55-utc-1" /></div><div class="vibe_editor_shortcode"><div class="vibebp_accordion_wrapper"><div class="vibebp_accordion_toggle"><input type="radio" name="accordion_0xST0HxLCcuChyX" id="accordion_0xST0HxLCcuChyX_0" checked><label for="accordion_0xST0HxLCcuChyX_0" class="vibebp_accordion_title">Overview </label><div class="vibe_editor_column_content vibebp_accordion_toggle_content"><div class="vibe_editor_rich_text"><p style="">A child needs to perform the yoga asana with the help of pictures.</p></div></div></div><div class="vibebp_accordion_toggle"><input type="radio" name="accordion_0xST0HxLCcuChyX" id="accordion_0xST0HxLCcuChyX_1" ><label for="accordion_0xST0HxLCcuChyX_1" class="vibebp_accordion_title">Learning Outcome</label><div class="vibe_editor_column_content vibebp_accordion_toggle_content"><div class="vibe_editor_rich_text"><ul>
  <li style="">Increases the height.</li>
  <li style="">Improves the overall Balance.</li>
  <li style="">Corrects the body Posture.</li>
</ul></div></div></div><div class="vibebp_accordion_toggle"><input type="radio" name="accordion_0xST0HxLCcuChyX" id="accordion_0xST0HxLCcuChyX_2" ><label for="accordion_0xST0HxLCcuChyX_2" class="vibebp_accordion_title">Lesson Plan</label><div class="vibe_editor_column_content vibebp_accordion_toggle_content"><div class="vibe_editor_rich_text"><h3 style="">Description:</h3>
<p style=""><strong>Teacher Modeling -</strong></p>
<p style="">The Teacher and parent need to play the graphic of various yoga poses.</p>
<p style=""><strong>Independent Practice</strong></p>
<p style="">After practicing with the graphic, a child needs to perform the yogasana with the help of the teacher or parents.</p>
<p style=""><strong>Related Media</strong></p>
<p style="">Graphics of Tadasana Yoga Posture.</p>
<p style=""><strong>Differentiation</strong></p>
<p style=""><strong>Support :</strong></p>
<ul>
  <li style="">Has the child taken help or assistance from his friends or partner? (Offline mode)</li>
</ul>
<figure style=""><img src="https://learn.bhavyata.com/wp-content/uploads/2021/10/Day1-A9.jpg" style=""></img></figure>
<p style=""><strong>Assessment for Course Evaluation:</strong></p>
<p style="">Steps of Asana:</p>
<ol>
  <li style="">Join both the legs.</li>
  <li style="">Put hands beside the body.</li>
  <li style="">Child need to stand on their toes.</li>
  <li style="">Hands will go up, and it should touch the ear.</li>
  <li style="">Concentrate on one point.</li>
  <li style="">While releasing asana, the child needs to bring the hands down slowly.</li>
  <li style="">And finally, the child will stand erect.</li>
</ol></div></div></div></div></div><div class="vibe_editor_shortcode"><div class="youtube_html_view"><div class="vibe_editor_media"><div class="video_plyr" data-plyr-provider="youtube" data-plyr-embed-id="https://www.youtube.com/watch?v=EtS9aEO8hx4"></div></div></div></div><div class="vibe_editor_media"><video class="video_plyr"  title="learn-bhavyata-foundation-4" controls><source src="https://learn.bhavyata.com/wp-content/uploads/2021/12/learn-bhavyata-foundation.mp4" type="video/mp4" /></video></div><div class="vibe_editor_shortcode">https://learn.bhavyata.com/wp-admin/admin-ajax.php?action=h5p_embed&id=46https://learn.bhavyata.com/wp-content/plugins/h5p/h5p-php-library/js/h5p-resizer.js</div></div><input type="radio" name="tabs_9ItqlJThy2QWLKQ" id="tabs_9ItqlJThy2QWLKQ_1" ><div class="vibebp_tab_content vibe_editor_column_content tabs_9ItqlJThy2QWLKQ_1"><div class="vibe_editor_media"><img src="https://learn.bhavyata.com/wp-content/uploads/2021/12/Aarambh-Prayer-1.jpg"  title="aarambh-prayer-1" /></div><div class="vibe_editor_shortcode"><div class="vibebp_accordion_wrapper"><div class="vibebp_accordion_toggle"><input type="radio" name="accordion_iSEdtiQXhcAtydX" id="accordion_iSEdtiQXhcAtydX_0" checked><label for="accordion_iSEdtiQXhcAtydX_0" class="vibebp_accordion_title">Overview</label><div class="vibe_editor_column_content vibebp_accordion_toggle_content"><div class="vibe_editor_rich_text"><p style="">In this activity, a child will learn and perform a prayer.</p></div></div></div><div class="vibebp_accordion_toggle"><input type="radio" name="accordion_iSEdtiQXhcAtydX" id="accordion_iSEdtiQXhcAtydX_1" ><label for="accordion_iSEdtiQXhcAtydX_1" class="vibebp_accordion_title">Learning Outcome</label><div class="vibe_editor_column_content vibebp_accordion_toggle_content"><div class="vibe_editor_rich_text"><ul>
  <li style="">Enhancement of vocabulary.</li>
  <li style="">Because of Prayer, a child becomes focused and calm.</li>
  <li style="">Prayer assists in setting the tone for the day.</li>
  <li style="">Prayer helps in making better decisions.</li>
</ul></div></div></div><div class="vibebp_accordion_toggle"><input type="radio" name="accordion_iSEdtiQXhcAtydX" id="accordion_iSEdtiQXhcAtydX_2" ><label for="accordion_iSEdtiQXhcAtydX_2" class="vibebp_accordion_title">Lesson Plan</label><div class="vibe_editor_column_content vibebp_accordion_toggle_content"><div class="vibe_editor_rich_text"><h3 style="">Description:</h3>
<p style=""><strong>Teacher Modeling -</strong></p>
<p style="">The Teacher and parent need to play the graphic of the prayer and help the children recite the poem.</p>
<p style=""><strong>Independent Practice</strong></p>
<p style="">After practising with the graphic, a child needs to recite the prayer without help.</p>
<p style=""><strong>Related Media</strong></p>
<p style="">Shloka graphic with audio reciting the same.</p>
<p style=""><strong>Differentiation</strong></p>
<p style=""><strong>Support :</strong></p>
<ul>
  <li style="">Has the child taken help or assistance from his friends or partner?</li>
</ul>
<p style=""><strong>Assessment for Course Evaluation:</strong></p>
<p style=""><strong>Samudra Vasane Devi Parvata stana Mannddale</strong></p>
<p style=""><strong>Vissnnu Patni Namas Tubhyam Paada sparsham Kssamasva me</strong></p>
<p style=""><strong>(Meaning:</strong> Oh, All-Loving Mother Earth, who has the oceans as her abode</p>
<p style="">and mountains as her breasts, The divine partner of Lord Vishnu, who is the master of the Universe, I bow to you with all my sincerity please bless me and forgive me for touching you with my feet.<strong>)</strong></p>
<p style=""><strong>Benefits of this shloka:</strong></p>
<ol>
  <li style="">Destroys ego</li>
  <li style="">Find forgiveness</li>
  <li style="">Love unconditionally</li>
  <li style="">Removes self-loathing</li>
</ol></div></div></div></div></div><div class="vibe_editor_shortcode">https://learn.bhavyata.com/wp-admin/admin-ajax.php?action=h5p_embed&id=113https://learn.bhavyata.com/wp-content/plugins/h5p/h5p-php-library/js/h5p-resizer.js</div></div></div></div></div>

[Veronica]

hi for that you can use video unit and the second option is to use the embed video code in [iframevideo].....[/iframevideo] shortcode

[Bhavyatafoundation]

As you can see in the video attached the unit I am using is a video unit. But the problem still exists. While the second video that was attached to the screen was done using via embed video code.

[Anshuman Sahu]

Yes this is an issue actually that youtube embed feature does not works properly , you can use raw html block to add iframe code of the video for it to work . https://somup.com/c3nVoeZ5KW there could be some video responsivity issues which can be resolved with css .

[Author]

Posts